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

), накладывает на любое изображение в документе одно невероятно удобное ограничение. Теперь ширина элемента 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 %?}

Если бы все было так просто…

Теперь займемся неприятными вещами и поговорим о некоторых особенностях браузеров по отношению к гибким изображениям.

Max-width в Internet Explorer

Суровая правда заключается в том, что Internet Explorer 6 и ниже не поддерживают свойство max-width. Что касается IE7 и выше, тут все в порядке. Но если вы, к моему глубочайшему сожалению, застряли в достопочтенном IE6 или более старой версии браузера, то придется кое-что доработать.

Существует несколько путей заставить свойство max-width работать в IE6. Большинство из них основано на JavaScript, обычно на базе проприетарного фильтра expression компании Microsoft, для динамической оценки ширины элемента и ручного изменения размеров в случае превышения установленного лимита. В качестве примера такого нестандартного подхода я могу порекомендовать статью Свенда Тофте (http://bkaprt.com/rwd/12/).

Что касается меня, я все-таки предпочитаю более простой CSS-подход. Все современные браузеры поддерживают свойство max-width:

img,
embed,
object,
video {
max-width: 100 %;
}

Но в отдельной таблице стилей для IE6 я бы сделал так:

img,
embed,
object,
video {
width: 100 %;
}

Заметили разницу? В IE6 и ниже правило width: 100 % оказывается важнее max-width: 100 %.

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

В большинстве случаев этот прием работает отлично. Например, наша чрезмерно большая картинка robot.jpg будет всегда больше содержащего ее контейнера, поэтому правило width: 100 % в этом случае можно применять смело.

Что касается более мелких изображений, например миниатюр или большинства встроенных роликов, их не всегда можно слепо масштабировать при помощи CSS. В этом случае для IE лучше сделать так:

img.full,
object.full,
.main img,
.main object {
width: 100 %;
}

Если вы не хотите на вашей странице применять правило width: 100 % ко всем медиафайлам с фиксированной шириной, то можете написать список селекторов, которые будут размечать определенные виды изображений или видео (img.full) или определенные области документа, в которые вы будете вставлять файлы большого размера (.main img, main object). Если изображения или другие медиафайлы появятся в этом списке, они станут гибкими, в противном случае – останутся в своем отсталом пиксельном состоянии.

Таким образом, если вы все еще работаете с морально устаревшими версиями Internet Explorer, внимательно применяйте это правило, и все получится. Эту проблему мы решили, переходим к следующей.

И это что-то.

…И здесь становится понятно, что Windows нас ненавидит

Если вы посмотрите на модуль блога в каком-нибудь браузере на базе Windows, наша картинка robot.jpg превратится из впечатляющей в нечто непонятное (рис. 3.6).

^{Рис. 3.6. При просмотре в IE6 можно заметить, что наше изображение робота содержит некоторые нежелательные артефакты. Судя по всему, Windows не особенно пригоден для гибких изображений}

И это проблема не браузера, а платформы: Windows не очень правильно определяет масштаб изображений. В Windows изображения, размеры которых изменены средствами CSS, быстро «обрастают» различными артефактами, что крайне плохо сказывается на их качестве.

Для проверки я забросил картинку с текстом в гибкий контейнер и изменил размер изображения при помощи правила max-width: 100 % во всех браузерах, а в IE6 и ниже при помощи