Picasa:自动更改网站中的图片大小

Question

我将我的网站图片保存在Picasa中...我们知道我们可以像这样设置图片的大小.

http://lh5.ggpht.com/-i97UI0TXchE/UatpZd-E3tI/AAAAAAAAAFg/HUu-QK63ce0/w900-h0/running-sml.jpg

该部分w900-h0 意味着,图片大小为:width900px和height0(自动).

所以我需要w900-h0根据设备的视口自动更改图像的这个url(acctualy部分 ),我知道我可以让图像流畅,只需将它们设置为max-widht:100%; 通过css,但在这种情况下,图片的大小不会变小,而且只是视觉上很小.

如何w900-h0通过java-script 更改部件 ,例如当视口为480时,URL更改 w300-h0等等.

Answer 1

你可以使用这样的东西来改变document.ready状态下的图像宽度:

imageWidth = $(window).width();
$("#my_image").attr("src","http://lh5.ggpht.com/-i97UI0TXchE/UatpZd-E3tI/AAAAAAAAAFg/HUu-QK63ce0/w"+imageWidth+"-h0/running-sml.jpg");

函数$(window).resize()也可以有助于动态调整大小.

更新:

如果要为多个图像执行此操作:

imageWidth = $(window).width();
$(".imageForResize").each(function() {
  $(this).attr("src", $(this).attr('src').replace('w900-h0', 'w'+imageWidth+'-h0'));
});

关于JSFiddle的例子