Question

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

如何使用jquery实现这一目标？感谢。

Answer 1

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

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

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

Answer 2

这将对您有所帮助：

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

Answer 3

如果要托管这些图像，则可能需要在服务器上进行缩放。这样您就可以节省带宽，缩短浏览器的下载时间，而无需在客户端调整大小。

Answer 4

您可以使用css将图像的宽度设置为100％，然后使用jQuery保持宽高比：

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

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

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

4 个答案: