javascript - Picasa:自动更改站点中的图像大小

Question

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

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

w900-h0 部分表示，图片尺寸为:width 900px，height 0(自动)。

所以我需要根据设备的视口(viewport)自动更改图像的这个 url(实际上是 w900-h0 部分)，我知道我可以让图像流畅，只需将它们设置为最大-宽度:100%；通过 css，但在那种情况下，图片的尺寸并没有变小，只是视觉上变小了。

我如何通过 java 脚本更改 w900-h0 部分，例如当视口(viewport)为 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'));
});

Example on JSFiddle