使用 JQUERY 自动调整图像大小/缩放答案

【问题标题】：Image Auto Resize / Scaling with JQUERY使用 JQUERY 自动调整图像大小/缩放
【发布时间】：2010-03-10 01:37:21
【问题描述】：

我有一个宽度为 600 像素的 div。我想动态拉取图像。图像大小各不相同。我想要做的是，如果图像大小超过 600 像素，我们会将图像调整为 600 像素以适应 div。但是如果图像不超过 600px，我们将保留原始图像宽度。

我怎样才能通过使用 jquery 来实现呢？谢谢。

【问题讨论】：

使用css，设置max-width/max-height为600px？

【解决方案1】：

您可以在不使用任何 JavaScript 的情况下执行此操作，方法是不为图像指定显式宽度（因此它将使用原始宽度）并添加以下 CSS 属性：

<img style='max-width: 600px' src='...'>

警告：在 IE 6 中不起作用。Compatibility table

【讨论】：

您可能会在某些浏览器中看到这个问题，如果没有给图像一个明确的宽度。特别是如果您尝试使用一些流行的 jQuery 插件。但也许您的应用程序不适用。为答案 +1。

【解决方案2】：

这将对您有所帮助：

$('img').each(function(){
    if($(this).width()>600){
        $(this).width(600).css('cursor','pointer').click(function(){$(this).css('width','');});
    }
});

【讨论】：

【解决方案3】：

如果您要托管这些图像，您可能希望在它们到达服务器时在服务器上对其进行缩放。这样您就可以节省带宽、缩短浏览器的下载时间并且无需在客户端调整大小。

【讨论】：

【解决方案4】：

您可以使用 css 将图像的宽度设置为 100%，然后使用 jQuery 保持纵横比，如下所示：

$('#containerDiv img').width(); //gets width of image
$('#containerDiv img').height(); //gets height of image

您可以进行计算以保持纵横比，然后使用height() 属性设置图像的新高度。

【讨论】：