Question

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

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

部分w900-h0表示图片尺寸为：width 900px，height 0（自动）。

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

如何通过java-script更改部件w900-h0，例如当视口为480时，网址已更改为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

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

1 个答案: