1

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

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

4

4 回答 4

7

您可以不使用任何 JavaScript 来执行此操作，方法是不给图像明确宽度（因此它将使用原始宽度）并添加以下 CSS 属性：

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

警告：在 IE 6 中不起作用。兼容性表

于 2010-03-10T01:43:55.333 回答
3

这将帮助您：

$('img').each(function(){
    if($(this).width()>600){
        $(this).width(600).css('cursor','pointer').click(function(){$(this).css('width','');});
    }
});
于 2011-07-14T23:51:54.820 回答
2

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

于 2010-03-10T02:12:17.640 回答
0

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

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

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

于 2010-03-10T01:44:50.013 回答