Как динамически менять размер картинки с 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>
Оставьте комментарий