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

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

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

部分w900-h0表示图片尺寸为：宽度900px,高度0(自动).

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

如何通过java-script更改部件w900-h0,例如当viewport为480时,url更改为w300-h0,依此类推.

解决方法:

您可以使用类似这样的内容来更改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

标签：html,javascript,picasa,fluid-images
来源： https://codeday.me/bug/20190831/1778898.html