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

Как научиться любить Overflow.

Существует еще несколько способов адаптации изображений с фиксированной шириной к «резиновому» контексту. Посмотрите эксперименты Ричарда Раттера с широкими изображениями в гибких макетах (http://bkaprt.com/rwd/11/). Раз уж вы решили заняться отзывчивым дизайном, изучите эти способы, некоторые из них могут оказаться весьма полезными.

Лично я несколько раз использовал свойство overflow. Как мы узнали из предыдущей главы, широкие изображения могут попросту вылезать за пределы своих контейнеров. И в большинстве случаев для их ограничения лучше всего использовать правило max-width: 100 %. Но можно и обрезать эти лишние данные, применив свойство overflow: hidden. То есть вместо того, чтобы позволить изображению изменить свои размеры автоматически:

.feature img {

max-width: 100 %;

}.

Мы можем попросту отрезать лишние данные:

.feature {

overflow: hidden;

}.

.feature img {

display: block;

max-width: auto;

}.

В результате получаем изображение, обрезанное под свой контейнер (рис. 3.15). Оно никуда не делось, просто его лишние элементы не видны.

Однако это не лучшее решение. На самом деле я считаю, что в большинстве случаев overflow проигрывает max-width. Но этот метод имеет право на существование и в некоторых случаях даже может быть полезным.

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

Рис. 3.15. Применив overflow: hidden к контейнеру нашего изображения, мы получили обрезанное изображение. Можно крикнуть «ура»