Picasa：自動更改網站中的圖片大小

我將我網站的圖片保存在Picasa中...因爲我們知道我們可以像這樣設置圖片的大小。Picasa：自動更改網站中的圖片大小

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

的部分w900-h0意味着，在畫面尺寸是：width 900px和height 0（自動）。

所以我需要改變這個網址，（acctualy部分w900-h0）的圖像自動取決於設備的視口，我知道我可以使圖像流體設置他們max-widht：100％;通過CSS，但在這種情況下，圖片的大小並沒有變得越來越小，它只是視覺上很小。

如何通過java-script更改零件w900-h0，例如，當視口爲480時，url被更改爲w300-h0等等。

來源

2013-06-02 Hovhannes Sargsyan

你嘗試過什麼？哪部分你遇到了麻煩，即如何計算大小，如何替換圖像的src屬性，如何找到要更改的圖像......？ – Graham

好的，所以我的圖像總是與''-'圖像類一樣，默認情況下，圖像的src中的寬度將是800（'w800'），所以當視口小於900時，部分url（圖像的src），'w800'改爲'w400'。 –

您可以使用這樣的事情來改變圖像寬度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()也可以幫助dynamicaly調整。

更新：

如果你想爲一個以上的圖像做到這一點：

imageWidth = $(window).width(); 
$(".imageForResize").each(function() { 
    $(this).attr("src", $(this).attr('src').replace('w900-h0', 'w'+imageWidth+'-h0')); 
});

Example on JSFiddle

來源

2013-12-15 22:52:02 yarl

但每次都會有另一張圖片，所以我不能這樣做，圖片的網址每次都會變化 –

@sarhov：anwser更新了，看看 – yarl

哦，是的！那就是，謝謝！ –

Picasa：自動更改網站中的圖片大小

回答

相關問題