图片使用JQUERY自动调整大小/缩放比例

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

我如何通过使用jQuery来实现？谢谢。

来源

2010-03-10 spotlightsnap

用css，设置最大宽度/ MAX-高度600px的？ – 2010-03-10 01:43:58

您可以通过给图像没有明确的宽度（所以它会使用原来的宽度），并添加以下CSS属性来做到这一点没有任何JavaScript：

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

警告：不工作在IE 6 Compatibility table

来源

2010-03-10 01:43:55

谢谢，我会尝试这 – spotlightsnap 2010-03-10 01:47:29

谢谢它的作品 – spotlightsnap 2010-03-10 03:27:11

你可能会看到在某些浏览器没有给出一个明确的宽度时，这个问题。特别是如果你尝试使用一些流行的jQuery插件。但是，也许你的应用程序不适用。 +1的答案。 – jay 2010-03-10 04:47:37

可以使用CSS的图像的宽度设置为100％，然后使用jQuery这样保持纵横比：

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

你ç进行计算以保持宽高比，然后使用height()属性设置图像的新高度。

来源

2010-03-10 01:44:50 jay

谢谢，我会试试这个 – spotlightsnap 2010-03-10 01:49:08

如果您正在托管这些映像，则可能需要在服务器上将它们扩展到服务器上。这样你就可以节省带宽，减少浏览器的下载时间，并且不需要在客户端调整大小。

来源

2010-03-10 02:12:17 MyGGaN

这将帮助你：

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

来源

2011-07-14 23:51:54

图片使用JQUERY自动调整大小/缩放比例

回答

相关问题