Awebdesign's Blog

Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

В комментариях пришел вопрос, можно ли динамически менять размер картинки в зависимости от размера браузера, как здесь: alexandergusev.com

Специально написала мини-тьютор, чтобы вы посмотрели, как это делается.

Пример здесь.

Попробуйте изменить размер браузера, и вы увидите, что размер картинки тоже меняется.

(Изображение в .png с прозрачностью, так что IE плохо его рендерит, с обычным прямоугольным изображением будет все в порядке в любом браузере.)

Итак, ява-скрипт динамического изменения размеров изображения:

<script type="text/javascript">
$(document).ready(function() {
var $winheight = $(window).height(); 

$(".source-image").attr({ height: $winheight });
$(window).bind("resize", function(){
var $winheight = $(window).height();
$(".source-image").attr({ height: $winheight });
});
});
</script>

Код очень простой. Класс .source-image относится к нашему изображению. Достаточно в коде HTML присвоить этот класс объекту img.

<img class="source-image" src="http://awebdesign.ru/tutors/img/fish.png" alt="" />

Не забудьте в header-е страницы прописать ссылку на jQuery, в моем случае ссылка на удаленный сервер:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 

type="text/javascript" charset="utf-8"></script>

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: