Этот вопрос достаточно распространённый, особенно среди начинающих, давайте рассмотрим принципы и методы подстройки изображения под разрешение экрана пользователя, посредством CSS.

Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (Rigid fixed), адаптивные резиновые (Adaptable fluid) и расширяемые эластичные (Expandable elastic) макеты.

В данной заметке, рассмотрим варианты подстройки элементов дизайна шапки, а именно - картинок, под резиновые макеты сайтов.

Делается это, обычно, тремя основными способами:

• Вёрсткой шапки, с использованием не фиксированных областей с фоном.
• Изменение параметров позиционированного изображения - разными способами.
• Изменение всего вида элементов методом динамического добавления/изменения стилей.

Вёрсткой шапки, с использованием не фиксированных областей с фоном

Наиболее распространённой и кроссбраузерной, является конструкция вида:

HTML-код:

CSS-стили:

В подобном исполнении, всё просто - рисуется шапка, в каком-нибудь графическом редакторе, например в фотошопе или кореле, нарезается на отдельные графические элементы (фрагменты):

картинка - слева:

картинка - справа:

и фон - по центру.

Для таблицы, в данном случае, прописывается фон, а ширина указывается в процентах - обычно 100%.

Ширина ячеек таблицы, в которых будут размещаться графические элементы, обычно прописывается в пикселях, но, как минимум, одна из ячеек таблицы должна иметь свободную ширину (auto).
То есть если ячеек две, как в данном случае, одной прописывается фиксированный размер, равный ширине картинки, второй устанавливается значение «auto» - то есть на всю оставшуюся ширину.

Сами картинки могут вставятся в предназначенные для них ячейки, как просто картинкой (тегом <img />), так и фоном.
В данном случае, картинки вставлены фоном, так как левая ячейка уже содержит текстовый блок - копирайт, а правая предполагает его наличие.

Здесь все просто - смотрим пример:

☑ Пример ...

Но, не каждую шапку можно нарезать подобным образом, и вот здесь начинают возникать некоторые сложности.
Варианты их решения рассмотрим далее ...

Изменение параметров позиционированного изображения

Масштабирование относительно родительского элемента

С использованием таблицы с параметром table-layout: fixed

Сразу хочу отметить, что у браузера Internet Explorer небольшие проблемы с изменением размеров объекта - в данном случае - картинки.
Суть его в следующем:
Если у картинке реальная ширина равна, допустим 1024px, и необходимо чтобы при изменении ширины окна браузера это изображение растягивались/сужались пропорционально, то при сужении окна браузера ширина изображения в определенный момент "застревает” и не сужаются дальше. В результате чего оно выходит за пределы предполагаемого контента.
То бишь, изображения не сужаются меньше их фактического размера.

Обходится этот «баг» достаточно просто и заключается всего в одной строчке CSS-кода - в свойстве «table-layout: fixed», которое нужно применить к таблице, в которую заключено изображение.

Следовательно, если у вас картинка шапки заведомо больше, минимальной ширины сайта, нужно задать таблице этот параметр.
Задаётся он через стили (CSS) и имеет всего два аргумента: «auto» и «fixed».

Кроме того:
Если у изображения не указана высота, или указано значение «auto» - изображение масштабируется пропорционально (сохраняя соотношение сторон).
Если же высота указана конкретно (в любых положительных единицах измерения), то соотношение сторон нарушается и изображение масштабируется только в ширину, сохраняя заданную в высоту.

HTML-код:

CSS-стили (изображение масштабируется пропорционально)

CSS-стили (изображение масштабируется линейно - в ширину)

Примеры:

☑ Пропорционально-масштабируемая картинка ...

☑ Линейно-масштабируемая картинка ...

И ещё, для кучи

Не все браузеры умеют правильно масштабировать изображения.
Opera, Safari и Google Chrome отобразят их почти без искажений.
А в Internet Explorer и Firefox (опаньки!) картинка исказится.

В MSIE искажения будет наиболее заметными.

Дело в том, что для ресемплинга (изменения размеров изображения) браузеры используют свой собственный, метод.

Например, если фактическая ширина изображения 200x200 px, но вы указываете, что его размеры должна быть 400x400 px (увеличиваете), то изображение будет растянуто, используя «nearest-neighbor» алгоритм масштабирования - по соседним пикселям - то бишь замыливание, если не указано иное.

Если же наоборот, вы уменьшаете изображение, то будет использоваться «bicubic» - бикубический режим сглаживания.

В Internet Explorer «nearest-neighbor» является значением по-умолчанию, но есть возможность принудительно задать необходимый режим, в зависимости от начальных размеров и качества вашей картинки.

Делается это через CSS, свойством «-ms-interpolation-mode».

Оно может принимать два значения:

Internet Explorer v6 - не поддерживает данную функцию.

В примерах, так как картинка изначально больше минимальной ширины контент блока, задан бикубический режим сглаживания

Масштабирование относительно родительского элемента

При с использованием блока-обёртки, позиционированному относительно его исходного положения (position:relative)

Суть его сводится к следующему - создается дополнительный блок-обертка, для которого устанавливается position:relative и в него помещается картинка (<img />), используемая в качестве фона.

Для того, чтобы картинка не висела на первом плане, загораживая собой возможный внутренний контент шапки - текст, другие картинки, прочее - блоку-обёртке назначают z-index:1, а картинке, что будет выступать в роли фона, тоже задают позиционирование (так как только позиционированным элементам можно задать атрибут - z-index - кроме position:static;) и атрибут z-index:-1, смещая тем самым её (по z-оси) на задний план.

Чтобы управлять положением блока с контентом внутри блока с картинкой, применяется абсолютное позиционирование и/или поля/отступы.
Блоки вне обёртки, позиционируются как и обычно.

HTML-код:

CSS-стили:

☑ Пример - пропорционально-масштабируемая картинка ...

Кроме того:
Так же как и в примере выше, если у изображения не указана высота, или указано значение «100%» - изображение масштабируется пропорционально.
Если же высота указана конкретно, в любых положительных единицах измерения, то не пропорционально, а только в ширину, сохраняя заданную в высоту.

☑ Пример - высота зафиксирована размером в 125px ...

Изменение всего вида элементов методом динамического добавления/изменения стилей

Изменение стиля блока посредством CSS3 свойства «background-size»

Кроме того, Web 2.0 давно пришел, и современные браузеры стремятся соответствовать стандарту W3C.
И многие уже поддерживают CSS3-свойство «background-size», непосредственно отвечающее за масштабирование фона.

К ним относится: Opera 9.5 и выше, Firefox 4 и выше,Safari 3 и выше, Chrome 4 и выше, Konqueror 3.5.4, и, как ни странно, лидер неподдержки стандартов - Internet Explorer 9.

Все они уже поддерживают CSS3 свойство «background-size», но, как и обычно, коряво, и для разных браузеров, по своему: через -moz-background-size для Мозиллы; -o-background-size для Opera; -webkit-background-size для Safari, Chrome, и -khtml-background-size для Konqueror (WebKit-браузеров), соответственно. ヅ ...

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

HTML-код:

CSS-код:

☑ Пример ...

К сожалению в Firefox 3.5 не работает «background-size», но для него можно повесить заведомо бОльшую картинку или фон:

Примечание:
Высота шапки, в данном случае, определяется высотой блока для фона, следовательно чем выше шапка - тем выше фоновая картинка.
Так как параметр background-size:100% 100%; - то есть 100% - в ширину и 100% - в высоту блока.
Есть возможность указать фиксированную высоту фона, на зависимо от высоты блока.

Например:
background-size:100% 200px; - картинка растянется на 100% от ширины блока, и на высоту 200px, лишнее скроется.

☑ Пример ...

Изменение стиля блока посредством CSS3 свойства Media Queries

С приходом CSS3 появилось такое свойство, как Media Queries. Благодаря ему, в будущем, будет гораздо проще оформлять страницы под разные разрешения монитора.

На данный момент свойства Media Queries поддерживаются Webkit-браузерами (Safari 4+), Opera, Firefox начиная с версии 3.5, Chrome 4 и выше, и, как ни странно, Internet Explorer (Second Preview) 9-ой версии. И Safari iPad.

Почти то же самое, что и в предыдущем примере.

HTML-код:

CSS-стили:

☑ Пример ...

Примечание:

Диапазон разрешений, как и количество блоков включений, не ограничено.

Вы можете определять стили не только под разрешение, но и для устройств вывода- для цветных и монохромных устройств (принтеры, читалки и т.п.), ориентации экрана (вертикальной или горизонтальной), и пр.

Блоки @media могут содержать любые стили.

Вдобавок к созданию блоков правил @media в CSS-файлах, можно использовать Media Queries в атрибуте media тэгов link и style и внутри блока @import.

Примеры использования:

Подключаются стили:

В документе (для вывода на печать и монохромных устройств вертикальной ориентации):

Импорт файла (в основную таблицу стилей или в документ):

Кроме средств на чистом CSS (с небольшими хаками) можно изменять картинку, фон, прочее, при помощи JavaScript.

Несомненно, это вариант даёт гораздо больше возможностей к изменению дизайна страницы, но так же и менее надёжен, например в том случае, если у пользователя отключён JS.

Но, о способах изменения дизайна страниц, в зависимости от разрешения монитора пользователя, расскажу в другой заметке.