Отзывчивый веб-дизайн - [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 и ниже при помощи
