图片使用JQUERY自动调整大小/缩放比例
我有一个宽度为600像素的div。我想动态地拉动图像。图像大小各不相同。我想要做的是,如果图像大小超过600像素,我们将调整图像大小为600像素,以适应div。但如果图像不超过600像素,我们将保留原始图像宽度。图片使用JQUERY自动调整大小/缩放比例
我如何通过使用jQuery来实现?谢谢。
您可以通过给图像没有明确的宽度(所以它会使用原来的宽度),并添加以下CSS属性来做到这一点没有任何JavaScript:
<img style='max-width: 600px' src='...'>
警告:不工作在IE 6 Compatibility table
谢谢,我会尝试这 – 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()
属性设置图像的新高度。
谢谢,我会试试这个 – spotlightsnap 2010-03-10 01:49:08
如果您正在托管这些映像,则可能需要在服务器上将它们扩展到服务器上。这样你就可以节省带宽,减少浏览器的下载时间,并且不需要在客户端调整大小。
这将帮助你:
$('img').each(function(){
if($(this).width()>600){
$(this).width(600).css('cursor','pointer').click(function(){$(this).css('width','');});
}
});
用css,设置最大宽度/ MAX-高度600px的? – 2010-03-10 01:43:58