Изображение с фиксированной высотой и 100% шириной

Бывают случаи, когда необходимо показать изображение, которое тянется по ширине на 100%, но при этом имеет фиксированную высоту. Также изображение должно сохранять свои пропорции (то есть всё, что не влазит по высоте - обрезается). Если написать вот так:

<img src="image.jpg" width="100%" height="300" alt="">

... то картинка будет растягиваться не пропорционально. Для того, чтобы это исправить используем слой-обертку:

<div class="b-img-wrap">
	<img src="image.jpg" width="100%" alt="">
</div>

Стили:

.b-img-wrap {
	height: 300px;
	overflow: hidden;
}

Как вы заметили, у изображение убрали параметр height, те высота изображения будет высчитываться браузером автоматически и изображение будет пропорционально изменять свои размеры. Для того, чтобы сохранилась фиксированная высота - задаём её слою-обёртке и присваиваем ему свойство overflow: hidden;. Таким образом всё, что выходит за пределы слоя будет скрываться.

Метод масштабирования изобажения

Во всех популярных браузерах кроме Internet Explorer ниже 8й версии используется качественный бикубический метод масштабирования изображения. А вот IE6 и IE7 используют метод копирования ближайшего пикселя - поэтому масштабированное изображение в этих браузерах получается менее качественным. С IE6 мы ничего не сделаем, а вот в IE7 мы можем решить проблему с помощью CSS-свойства -ms-interpolation-mode. Это свойство определяет каким способом масштабировать изображения и может принимать одно из следующих значений:

• nearest-neighbor (метод копирования ближайшего пикселя) – по умолчанию
• bicubic (бикубический метод)

Соответственно используем CSS-хак для IE7:

*+html .b-img-wrap IMG { -ms-interpolation-mode: bicubic; }

Пример к статье

Скачать пример ²⁴ (img_100p_fix_height.zip, ~352Kb) | Посмотреть пример

Работоспособность была проверена в следующих браузерах:

• Mozilla Firefox 3.5
• Opera 9.64
• Safari 4 (win)
• Internet Explorer 6, 7, 8