Hi-Tech → CSS Max-Width и глюки IE. Хаки для Internet Explorer

CSS свойство max-width - отличное средство, если вы не хотите, чтобы элемент был больше заданного размера. Применение этого свойства к картинкам очень удобно. Конечно, зачастую лучше специально подготавливать изображения для публикации в сети Интернет, однако это не всегда удобно и не всегда возможно.

*****

Синтакцис для использования max-width таков:

selector {max-width:value;}

Например, если вы хотите, чтобы все изображения в блоке с id wrapper были максимум 400 пикселов по ширине, вы можете прописать в таблице стилей что-то вроде этого:

.wrapper img {max-width:400px;}


Естесственно, вы можете выставлять значение max-width любым. Также это значение можно указывать и в процентах, например для "резиновых" сайтов (ширина которых зависит от разрешения экрана):

.wrapper img {max-width:95%;}


В этом случае ширина изображений не превысит 95% от имеющегося места (Обычно желательно не занимать изображением 100% экрана, а оставлять небольшие отступы).

Но... Не всё так просто как кажется, и виной тому старый добрый Internet Explorer. Всё дело в том, что все версии браузера вплоть до 7 (включительно) не поддерживают это css-свойство. (Не берусь говорить за 8 версию - даже не пробовал) - прим. ред.

А так уж сложилось, что этим браузером бользуется львиная доля всех посетителей сайта.

Но выход есть. И выход - в возможности обработки javascript в css, встроенной в IE.

Вот простой синтаксис использования такого условия:

selector {width: expression(this.width > value ? value: true);}

Я не буду рассказывать все варианты использования expression в css для IE, но, поверьте, вариантов использования масса. Я лишь покажу вам как заставить IE уменьшать изображения до заданного размера, если исходный размер (ширина) больше чем нам необходим.


.wrapper img {
max-width:400px;
width: expression(this.width > 400 ? 400: true);
}

К сожалению, мне не удалось найти способа использовать этот метод для обозначения максимальной ширины изображения в процентах. Однако с пикселями всё работает корректно. Браузеры, отличные от IE, спокойно игнорируют условие width:expression, обрабатывая только max-width. Что, собственно, нам и нужно.