“Отзывчивые” изображения

В последнее время часто возникает вопрос – как в темах WordPress с “адаптивным”, “отзывчивым” дизайном добавить изображение, например в шапку сайта которое уменьшалось и увеличивалось вместе с остальными изображениями на сайте? Этот вопрос актуален не только для тем WordPRess, но и для любой html-страницы. Про “отзывчивый” дизайн я писал ранее в заметке «“Отзывчивый” дизайн за три шага».

В общем случае это можно сделать так:

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

В частном – добавить идентификатор элемента-обертки для исключения нежелательных последствий для других изображений.

Указанный код добавляется в файл стилей, зачастую это style.css.

Только изображениями дело не ограничивается, аналогичный трюк можно проделать и с видео-роликами так:

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}
Опубликовано

Обратите внимание на предыдущие записи: