Как менять размер объектов при изменении размеров окна браузера?

Question

[No1s3]

Есть данный код - jsfiddle.net/ATwxG/2

Нужно сделать так, чтобы размер картинок изменялся при уменьшении размера окна браузера. Запутал сам себя.

Заранее спасибо!

Answer 1

[Михей Егоров]

max-width: 100%;
Картинки будут уменьшатся если не будут влезать в родительский элемент (размеры которого могут быть в процентах)
Гуглите так же responsive images

Comments

[Igor Lanko]

Да вот же решение! Какие, блин, скрипты.

Answer 2

[Петруша Укропов]

Картинки закрыты паролем, это раз.
h_ttp://jquery.page2page.ru/index.php5/Обработчик_или_источник_события_resize, это два.

Comments

[No1s3]

Спасибо. Картики перезалил. Дело в том что хотелось бы решить проблему в CSS а не привязывать скрипты типа jquery.

Answer 3

[Юрий Лобанов]

а цель какая? если для того, чтобы не текла верстка, то можно сделать ступенчатое изменение, используя только css. Если нужно плавное изменение, то в голову только js приходит.

Comments

[No1s3]

Спасибо! А с "ступенчатое изменение, используя только css" можно поподробнее?

[Юрий Лобанов]

Почитайте про meta name="viewport" или посмотрите, как этим пользуются в twitter bootstrap. Вот, например: bootstrap-ru.com/204/scaffolding.php - см. заголовок - динамический дизайн.

Answer 4

[Эмиль Валеев]

Как вариант, использовать в макете не сами изображения, а блочные элементы с нужными изображениями в фоне.
Есть замечательное CSS3 - волшебство background-size: contain, которое "масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока".
Один нюанс - в блоке, естественно, должны быть заданы ширина и высота, причем, в процентах, что логично (нам же нужна резина, ведь так?).
Надеюсь, помог. :)

Comments

[Юрий Лобанов]

Не совсем понятно, нужна ли кроссбраузерность, я имею в виду старые версии ie. В старых это работать не будет.