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

Question

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

javascriptjqueryimagejquery-pluginsresize

7

看起来我没有解释清楚，对此我深感抱歉。

我已经编辑了这个问题，使其更加清晰明了。

场景

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

计划

调整大小并保持比例。
将调整后的图像居中。
具有灵活性，可以适应多种尺寸。

错误

我的代码按预期工作，但有时会出现 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%');

- Marco

你能把你的回答改成问题形式吗？ - Incognito

对不起，你是什么意思？（英语不是我的母语） - Marco

要使图像居中，您可以将其设置为display:block并使用margin:auto吗？ - Alex

我已经更新了问题，使其更清晰。主要更改在于“错误”。 - Marco

6个回答

1

这可能是一种竞争条件。您正在设置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"的引用，而不是缩略图元素。因此，您的逻辑将需要引用"$thumb"作为DOM元素，以及"in-memory"图像的"this"（或"img"）。

此外，有关实际逻辑，请查看上面提供的答案"Scott S"。他的建议看起来比您拥有的更简单。

- Ben Lee

0

这个脚本将根据图像的方向缩小并对齐它们。图像被圆形化，使用固定宽度和高度的div，并设置了overflow:hidden样式。该脚本实际上识别图像方向，并根据图像的垂直或水平方向，在样式中添加margin-left或margin-top的负属性。

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>

您可以在这里查看演示：链接

- munge83

0

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

- JamieL

0

从您的问题中并不清楚，但我假设您的一个问题是在http://www.algarvehouses.com首页底部表格中图像的左对齐。

这里的问题不在于您的jQuery代码，而是在于您的CSS。

向thumb-inner类添加text-align:center。然后确保该规则在“table.dlRandom img，…”规则之后加载-或者从该规则中删除display:block。这样就可以将这些图像居中。

一般来说，为了缩放图像，您的逻辑在div的点上看起来是正确的。不太理解那个逻辑。您不需要设置自动大小，只需限制所需的尺寸即可。

一个旁枝小节的提示-在上面的代码中，您至少引用了16次$(this)。在函数顶部执行此操作，然后从那里使用它：

var $this = $(this);

- Oskar Austegard

非常感谢您的时间。如果您访问网站的搜索页面，并从第1页更改到第2页，然后再到第3页，再到第1页等等，您会注意到有时图像显示为靠左对齐，就像您所描述的那样。其他时候它们会正确显示。主要问题是使它们始终正确显示。我不知道我是否解释得清楚...但我将更新问题。 - Marco

我已经更新了“错误”。希望这样更清楚明白。哦！还有感谢你的相关提示。 :) - Marco

0

我真的没有理解你的问题，但这个可能会对您有所帮助。

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传递给您的最大宽度值，例如300px，并将maxHeight传递给您的图像最大高度，例如300。

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

请随意提出更多关于此问题的问题，并请更加明确。

- Fatih Acet

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scott S · Accepted Answer

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

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即可。