Picasa：自动更改站点中的图像大小答案

【问题标题】：Picasa: automaticly change image size in the sitePicasa：自动更改站点中的图像大小
【发布时间】：2013-06-02 15:59:18
【问题描述】：

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

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

w900-h0部分表示，图片大小为：width900px和height0（自动）。

所以我需要根据设备的视口自动更改图像的这个 url（实际上是 w900-h0 部分），我知道我可以使图像变得流畅，只需将它们设置为 max-widht:100%;通过 css，但在这种情况下，图片的大小并没有变小，只是视觉上很小。

如何通过 java 脚本更改 w900-h0 部分，例如当视口为 480 时，url 更改为 w300-h0 等等。

【问题讨论】：

你试过什么？您在哪个部分遇到问题，即如何计算尺寸、如何替换图像的 src 属性、如何找到要更改的图像...？
好的，所以我的图像总是在 div 中，类为the-image，默认情况下图像的 src 中的宽度为 800 (w800)，所以当视口小于 900 时，url部分（图片的src），w800改为w400。

标签： javascript html picasa fluid-images

【解决方案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

【讨论】：

但是每次都会有另一张图片，所以我不能这样，每次图片的url都会改变