使用jQuery调整大小和居中图像

Question

看起来我没有很好地解释自己。 我为此道歉。

我已编辑此问题以使其更清晰。

---

场景

我们有一个不托管图片的网站。 它的作用是对其他服务器中的图像的引用。

---

计划

• 调整图像大小保持比例。
• 中心调整了图像大小。
• 灵活，因此它可以适合多种尺寸。

---

错误

我的代码按预期工作，但有时会出现一个Bug。

如果你去网站的搜索页面，并在第1，第2，第3和第4页之间交换几次，你会注意到有时图像是好的...有时候它们看起来是左对齐的，并且不会占用满容器区。

---

链接

完整的网站 （测试版）

JavaScript文件

帮助我的jQuery插件 （jThumb）

---

计划（详细版）

假设图像是600x400像素（记住它们不在此服务器上托管），并且使用jQuery和CSS，我想将图像（保持比例）调整为310x200像素的容器。

另一个挑战是使图像居中。

所有这一切都必须灵活，因为网站上有几种不同的容器尺寸。

---

到目前为止我做了什么（你可以在上面的链接中找到）

为了调整我正在做的图像的大小：

var img = new Image();
img.src = $(this).attr("src");
var width = $(this).css('width');
var height = $(this).css('height');

var photoAspectRatio = img.width / img.height;
var canvasAspectRatio = width.replace("px", "") / height.replace("px", "");

if (photoAspectRatio < canvasAspectRatio) {
    $(this).css('width', width);
    $(this).css('height', 'auto');

    var intHeight = height.replace("px", ""); //tirar o PX
    $(this).css('marginTop', (-Math.floor(intHeight / 2)));
}
else {
    $(this).css('width', 'auto');
    $(this).css('height', height);
}

$(this).wrap('<div class="thumb-img" style="width:' + width + ' ;height:' + height + ';"><div class="thumb-inner">' + '</div></div>');

---

为了使我正在做的图像居中：

jQuery(this).css('position','absolute');
jQuery(this).left( '-' + ( parseInt( $(this).width() ) / 2 ) + 'px' );
jQuery(this).top( '-' + ( parseInt( $(this).height() ) / 2 ) + 'px' );
jQuery(this).css('margin-left', '50%' );
jQuery(this).css('margin-top', '50%');

---

Answer 1

有一个更简单的解决方案来确定如何调整图像大小和位置。 它适用于所有图像和容器尺寸。

var canvasWidth = parseInt(width);
var canvasHeight = parseInt(height);

var minRatio = Math.min(canvasWidth / img.width, canvasHeight / img.height);
var newImgWidth = minRatio * img.width;
var newImgHeight = minRatio * img.height;

var newImgX = (canvasWidth - newImgWidth) / 2;
var newImgY = (canvasHeight - newImgHeight) / 2;

现在只需使用newImgX，newImgY定位图像，并将其大小调整为newImgWidth，newImageHeight。

Answer 2

这可能是竞争条件。 您正在设置img src，然后立即尝试获取其宽度和高度属性。 但是，无法保证Web浏览器已下载图像或从浏览器缓存中删除它，如果没有，则代码将导致意外结果。

你需要做这样的事情：

var img = new Image();
var $thumb = $(this);

img.load(function() {
  /* .....[image calculation and resize logic]..... */
});

img.src = $thumb.attr("src");

请注意，上述语句的顺序是非常重要的-你必须先装上img.load事件处理程序，然后第二分配img.src。 如果你以其他顺序执行，最终会出现相反的竞争条件（图像可能已经在img.src赋值后加载，在这种情况下，事件处理程序将不会在所有浏览器中调用 - 通过设置事件处理程序首先确保在img.src赋值后调用它，即使图像已经加载了）。

另外，请注意顶部的$ thumb定义。 这是因为img.load函数中的“this”将是对新“img”的引用，而不是thumbnail元素。 所以你的逻辑必须为DOM元素引用“$ thumb”，为内存中的图像引用“this”（或“img”）。

另外，对于实际逻辑，请看一下上面提供的答案“Scott S”。 他的建议看起来比你的简单。

Answer 3

此脚本将缩小，并根据其方向对齐图像。 图像是圆形的，其中div ho具有固定的宽度和高度，并且还设置为溢出的样式：隐藏。 脚本实际识别图像方向和广告，以根据图像垂直或水平方向的样式在负属性中对边缘左边缘或边缘顶部成像。

CSS：

<style type="text/css">
.thumb {
width:160px;
height:160px;
overflow:hidden;
}
</style>

用javascript jquery：

window.onload = function() {
  var images = $(".image_center");
  for(i=0; i<images.length; i++)
     images[i].onload = centerImage(images[i]);

  function centerImage(img) {
   if (img.width > img.height ) {
   var y = 160;
   var x = img.width/img.height*y;
   var marx = (x-y)/2;
   img.style.height = y+"px";
   img.style.marginLeft = -(marx) + "px";
   }
   if (img.width < img.height ) {
   var x = 160;
   var y = img.height/img.width*x;
   var mary = (y-x)/2;
   img.style.width = x+"px";
   img.style.marginTop = -(mary) + "px";
   }
  }
}

HTML：

<div class="thumb"><img class="image_center" src="sa.jpg" alt="#" /></div>
<div class="thumb"><img class="image_center" src="sb.jpg" alt="#" /></div>

你可以在这里看到演示： 链接

Answer 4

实现此目的的另一个有用的插件是jQuery Center Image ，它支持两种模式。 一个用于通过裁剪和调整图像大小来填充整个空间，另一个用于模拟最大宽度/最大高度以调整大小以适应空间。

Answer 5

从你的问题中不清楚，但我假设你的问题是你的头版下半部分的表格左侧对齐http://www.algarvehouses.com 。

这里的问题不是你的jQuery代码，而是你的CSS。

在你的拇指内部类中添加一个text-align：center。 然后确保在“table.dlRandom img，...”规则之后加载规则 - 或者从该规则中删除display：block。 这应该是这些图像的中心。

通常情况下 - 为了缩放图像，您的逻辑看起来正确到div的点。 不太明白那个逻辑。 您不需要设置自动大小，只需限制所需的维度。

一个切向提示 - 在上面的代码中，您引用$（this）不少于16次。 在函数的顶部执行此操作，并从那里使用它：

var $this = $(this);

Answer 6

我真的没有得到你的问题，但这可能对你有帮助。

function resizer(imgCls, maxWidth, maxHeight) {
    var img = $('img'), imgWidth, imgHeight;
    img.each(function () {
        imgWidth = this.width;
        imgHeight = this.height;
        if (imgWidth > maxWidth || imgHeight > maxHeight) {
            var widthFact = maxWidth / imgWidth;
            var heightFact = maxHeight / imgHeight;
            var chooseFact = (widthFact > heightFact) ? heightFact : widthFact;
            imgWidth = imgWidth * chooseFact;
            imgHeight = imgHeight * chooseFact;
        }
    })
}

此代码使图像与提供的className匹配并查看您的参数。 将maxWidth传递给maxWidth值，例如300 px，并将maxHeight传递给图像maxHeight，例如300。

然后该函数将循环每个图像并检查其宽度和高度。 如果其宽度或高度大于最大值，则将通过保持纵横比来调整其大小。

请让您自由地询问有关此问题的更多问题，请更清楚。