[Ликбез] |
Форма входа |
Меню сайта |
Categories | ||||
|
Главная » Статьи » Web-кодинг » CSS |
Этот вопрос достаточно распространённый, особенно среди начинающих, давайте рассмотрим принципы и методы подстройки изображения под разрешение экрана пользователя, посредством CSS. Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (Rigid fixed), адаптивные резиновые (Adaptable fluid) и расширяемые эластичные (Expandable elastic) макеты. В данной заметке, рассмотрим варианты подстройки элементов дизайна шапки, а именно - картинок, под резиновые макеты сайтов. Делается это, обычно, тремя основными способами:
Вёрсткой шапки, с использованием не фиксированных областей с фономНаиболее распространённой и кроссбраузерной, является конструкция вида: HTML-код: Code (HTML) <table id="headerTb" width="100%" border="0" cellspacing="0" cellpadding="0"><tr> CSS-стили: Code (HTML) <style type="text/css"> В подобном исполнении, всё просто - рисуется шапка, в каком-нибудь графическом редакторе, например в фотошопе или кореле, нарезается на отдельные графические элементы (фрагменты): и фон - по центру. Для таблицы, в данном случае, прописывается фон, а ширина указывается в процентах - обычно 100%. Ширина ячеек таблицы, в которых будут размещаться графические элементы, обычно прописывается в пикселях, но, как минимум, одна из ячеек таблицы должна иметь свободную ширину (auto). Сами картинки могут вставятся в предназначенные для них ячейки, как просто картинкой (тегом <img />), так и фоном. Здесь все просто - смотрим пример: ☑ Пример ... Но, не каждую шапку можно нарезать подобным образом, и вот здесь начинают возникать некоторые сложности. Изменение параметров позиционированного изображенияМасштабирование относительно родительского элементаС использованием таблицы с параметром table-layout: fixed Сразу хочу отметить, что у браузера Internet Explorer небольшие проблемы с изменением размеров объекта - в данном случае - картинки. Обходится этот «баг» достаточно просто и заключается всего в одной строчке CSS-кода - в свойстве «table-layout: fixed», которое нужно применить к таблице, в которую заключено изображение. Следовательно, если у вас картинка шапки заведомо больше, минимальной ширины сайта, нужно задать таблице этот параметр. Кроме того: HTML-код: Code (HTML) <table id="headerTb" width="100%" border="0" cellspacing="0" cellpadding="0"><tr> CSS-стили (изображение масштабируется пропорционально) Code (HTML) <style type="text/css"> CSS-стили (изображение масштабируется линейно - в ширину) Code (HTML) <style type="text/css"> Примеры: ☑ Пропорционально-масштабируемая картинка ... ☑ Линейно-масштабируемая картинка ... И ещё, для кучи Не все браузеры умеют правильно масштабировать изображения. В MSIE искажения будет наиболее заметными. Дело в том, что для ресемплинга (изменения размеров изображения) браузеры используют свой собственный, метод. Например, если фактическая ширина изображения 200x200 px, но вы указываете, что его размеры должна быть 400x400 px (увеличиваете), то изображение будет растянуто, используя «nearest-neighbor» алгоритм масштабирования - по соседним пикселям - то бишь замыливание, если не указано иное. Если же наоборот, вы уменьшаете изображение, то будет использоваться «bicubic» - бикубический режим сглаживания. В Internet Explorer «nearest-neighbor» является значением по-умолчанию, но есть возможность принудительно задать необходимый режим, в зависимости от начальных размеров и качества вашей картинки. Делается это через CSS, свойством «-ms-interpolation-mode». Оно может принимать два значения: Code (Info) -ms-interpolation-mode:nearest-neighbor; /*- Всегда используется интерполяция по соседним пикселям */ Internet Explorer v6 - не поддерживает данную функцию. В примерах, так как картинка изначально больше минимальной ширины контент блока, задан бикубический режим сглаживания Масштабирование относительно родительского элементаПри с использованием блока-обёртки, позиционированному относительно его исходного положения (position:relative)Суть его сводится к следующему - создается дополнительный блок-обертка, для которого устанавливается position:relative и в него помещается картинка (<img />), используемая в качестве фона. Для того, чтобы картинка не висела на первом плане, загораживая собой возможный внутренний контент шапки - текст, другие картинки, прочее - блоку-обёртке назначают z-index:1, а картинке, что будет выступать в роли фона, тоже задают позиционирование (так как только позиционированным элементам можно задать атрибут - z-index - кроме position:static;) и атрибут z-index:-1, смещая тем самым её (по z-оси) на задний план. Чтобы управлять положением блока с контентом внутри блока с картинкой, применяется абсолютное позиционирование и/или поля/отступы. HTML-код: Code (HTML) <div id="wrapBox"> Где: <div id="selfBox"> ... </div> - дополнительный контент - в данном случае - копирайт. CSS-стили: Code (CSS) <style type="text/css"> ☑ Пример - пропорционально-масштабируемая картинка ... Кроме того: ☑ Пример - высота зафиксирована размером в 125px ... Изменение всего вида элементов методом динамического добавления/изменения стилейИзменение стиля блока посредством CSS3 свойства «background-size» Кроме того, Web 2.0 давно пришел, и современные браузеры стремятся соответствовать стандарту W3C. К ним относится: 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-код: Code (HTML) <h1 id="headLogo">Уголок аццкого кодера. Резиновые изображения, подстройка картинок под монитор</h1> CSS-код: Code (CSS) <style type="text/css"> ☑ Пример ... К сожалению в Firefox 3.5 не работает «background-size», но для него можно повесить заведомо бОльшую картинку или фон: Code (CSS) @-moz-document url-prefix(){ Примечание: Например: ☑ Пример ... Изменение стиля блока посредством 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-код: Code (HTML) <h1 id="headLogo">Уголок аццкого кодера. Резиновые изображения, подстройка картинок под монитор</h1> CSS-стили: Code (CSS) <style type="text/css"> Где: @media screen and (max-width:1024px) and (min-width:800px){} - указываем диапазон разрешений, при котором эти стили должны работать. #headLogo{background-image:url(_st/v01_h_800x133.jpg);} - картинка для шапки (фон) - по умолчанию. #headLogo{width:100%;} - основные, неизменяемые параметры шапки. ... "Основные параметры блока” и "фон по умолчанию” - разбит для наглядности... ☑ Пример ...
Примеры использования:Подключаются стили: Code (HTML) <link rel="stylesheet" media="screen and (max-width:800px)" href="/_content/_ext/img-bg/_st/800.css" /> В документе (для вывода на печать и монохромных устройств вертикальной ориентации): Code (HTML) <style type="text/css" media="print and (orientation:portrait)"> Импорт файла (в основную таблицу стилей или в документ): Code (CSS) @import "1024.css" screen and (max-width:1152px) and (min-width:1024px); Поиграться, растягивая окно браузера и наблюдая, как меняются циферки, можно вот на этом примере: ☑ Пример - шаг разрешения = 100px (выводится диапазон текщего разрешения.) ...
Источник: css, для, html, background, width, как, height, size, style, картинка, media, изображения, code, headlogo | |
Всего комментариев: 0 | |