javascript - 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（实际上是部分），我知道我可以使图像变得流畅，只需将它们设置为 max-widht:100%; 通过css，但在这种情况下，图片的大小并没有变小，只是视觉上很小。

如何 w900-h0通过 java 脚本更改部分，例如当视口为 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 上的示例