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

Я храню изображения своего сайта в Picasa... как мы знаем, мы можем установить размер изображения таким образом.

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

Часть w900-h0 означает, что размер изображения: width 900 пикселей, а height 0 (авто).

И поэтому мне нужно изменить этот URL-адрес (фактически часть w900-h0) изображения автоматически в зависимости от области просмотра устройства, я знаю, что могу сделать изображения плавными, просто установив для них максимальную ширину: 100%; через css, но в этом случае размер картинки не уменьшается, а просто визуально мал.

Как я могу изменить часть w900-h0 с помощью java-скрипта, например, когда область просмотра равна 480, URL-адрес изменяется w300-h0 и так далее.


javascript html fluid-images picasa
person Hovhannes Sargsyan    schedule 02.06.2013    source источник
comment
Что вы пробовали? С какой частью у вас возникли проблемы, например, как рассчитать размеры, как заменить свойство изображения src, как найти изображения для изменения...?   -  person Graham    schedule 02.06.2013
comment
хорошо, поэтому мои изображения всегда в div с классом the-image, по умолчанию ширина в src изображения будет 800 (w800), поэтому, когда область просмотра меньше 900, часть URL-адреса (src изображения) , w800 меняется на w400.   -  person Hovhannes Sargsyan    schedule 02.06.2013

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать что-то вроде этого, чтобы изменить ширину изображения в состоянии 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

person yarl    schedule 15.12.2013
comment
но каждый раз будет другая картинка, так что я не могу так сделать, адрес картинки каждый раз будет меняться - person Hovhannes Sargsyan; 16.12.2013