Question

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

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

场景

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

计划

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

错误

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

如果你去网站的搜索页面，并在第1,2,3和4页之间交换几次，你会注意到有时图像是好的...有时它们看起来是对齐的，而不是占据整个集装箱区域。

链接

The full website（测试版）

The JavaScript File

The jQuery plugin that helped me（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，然后立即尝试获取其宽度和高度属性。但是无法保证网络浏览器已经下载了图像或从浏览器缓存中删除了图像，如果没有，则代码会导致意外结果。

你需要做这样的事情：

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

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

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

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

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

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

Answer 3

您的问题并不清楚，但我假设您的问题是首页下半部分http://www.algarvehouses.com处的图片左对齐。

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

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

一般来说 - 为了缩放图像，你的逻辑看起来正确到div的点。不太明白那个逻辑。您不需要设置自动尺寸，只需限制所需的尺寸。

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

var $this = $(this);

Answer 4

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

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.

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

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

Answer 5

此脚本将缩小，并根据其方向对齐图像。图像是圆形的，其中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>

您可以在此处查看演示：Link

Answer 6

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

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

场景

计划

错误

链接

计划（详细版本）

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

6 个答案: