Picasa: автоматически изменять размер изображения на сайте

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, но в этом случае размер картинки не становится меньше, а визуально маленький.

Как я могу изменить часть w900-h0 через java-скрипт, например, когда viewport равен 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