Отзывчивый веб-дизайн.

Гибкие изображения.

А что если ввести такое ограничение: написать правило, которое не позволит картинкам выходить за ширину их контейнера?

У меня для вас хорошие новости: сделать это проще простого:

img {

max-width: 100 %;

}.

Правило, открытое дизайнером Ричардом Раттером (http://bkaprt.com/rwd/11/), накладывает на любое изображение в документе одно невероятно удобное ограничение. Теперь ширина элемента img может быть какой угодно, при условии, что она не превышает ширину содержащего его контейнера. В противном случае свойство max-width: 100 % заставит изображение ограничиться шириной контейнера. И как вы видите, наша картинка прекрасно стала на место (рис. 3.3).

Отзывчивый веб-дизайн

Рис. 3.3. За счет добавления max-width: 100 % мы смогли удержать наше изображение в рамках контейнера. Вот за что я люблю max-width: 100 %

Отзывчивый веб-дизайн

Рис. 3.4. Вне зависимости от изменения размеров гибкого контейнера изображение остается пропорциональным. Волшебство? Кто знает…

Более того, современные браузеры умеют пропорционально менять размеры картинок. Если гибкий контейнер будет менять свои размеры, уменьшая или увеличивая изображение, соотношение сторон картинки останется неизменным (рис. 3.4).

Я надеюсь, вы еще не устали от хороших новостей, поскольку, как оказалось, правило max-width: 100 % можно применять к большинству элементов с фиксированной шириной, таким как видео– и другие медиафайлы. Фактически мы можем добавить в селектор еще и другие медиаэлементы:

img,

embed,

object,

video {

max-width: 100 %;

}.

Это может быть небольшое флеш-видео (рис. 3.5), встроенный медиафайл или скромное изображение – браузеры все сделают сами и поменяют размеры соответственно макету. И все благодаря этому чудесному ограничению max-width.

Так что же получается, мы действительно решили проблему гибких изображений? Одно правило – и все готово?

Отзывчивый веб-дизайн

Рис. 3.5. С параметром max-width: 100 % гибкими становятся и другие элементы медиа. Я уже говорил, что люблю max-width: 100 %?