Подстройка размера картинки под разрешение экрана

Страница 1 из 16 1 2 3 … 15 16 »
Модератор форума: Yuri_G

Подстройка размера картинки под разрешение экрана (Подстройка размера изображения под разрешение экрана)

Подстройка размера картинки под разрешение экрана

fflesh

Сообщений: 1784

Репутация: 1314

Сообщение # 1 | 23:56:47 09 Мар 2011

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

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

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

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

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

HTML-код

Code

<table id="headerTb" width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="hdLeft"><div class="author">Copyright <b>2005-2011</b> <a class="flink" href="http://likbezz.ru/">«likbezz.ru»</a>, Оформление: <a class="flink" href="http://likbezz.ru/index/8-1" target="_blank">Flesh</a></div></td>
<td class="hdRight"> </td>
</tr>
</table>

CSS-стили:

Code

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

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

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

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

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

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

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

☑ Пример ...

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

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

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

В данном случае - таблица.

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

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

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

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

HTML-код:

Code

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

Quote (CSS)

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

Quote (CSS)

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

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

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

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

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

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

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

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

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

Quote (Info)

-ms-interpolation-mode:nearest-neighbor; - Всегда используется интерполяция по соседним пикселам.
-ms-interpolation-mode:bicubic; - Всегда используется высококачественный бикубический режиме интерполяции.

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

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

Quote

#headerTb img.topImg{width:100%!important;height:auto!important;-ms-interpolation-mode:bicubic;}

...

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

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

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

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

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

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

HTML-код:

Quote (HTML)

<div id="wrapBox">
<div id="selfBox"><div class="author">Copyright 2005-2011 <a class="flink" href="http://likbezz.ru/">«likbezz.ru»</a>, Оформление: <a class="flink" href="http://likbezz.ru/index/8-1" target="_blank">Flesh</a></div></div>
<img class="topImg" src="/_content/_tpl/v00/_st/v00_h_1200.jpg" alt="" />
</div>

Где:
<div id="selfBox"> ... </div> - дополнительный контент - в данном случае - копирайт.
<img class="topImg" /> - картинка.

CSS-стили:

Quote

☑ Пример ...

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

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

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8

fflesh

Сообщений: 1784

Репутация: 1314

Сообщение # 2 | 00:30:22 10 Мар 2011

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

Изменение стиля блока посредством 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-код:

Code

<h1 id="headLogo">Уголок аццкого кодера. Резиновые изображения, подстройка картинок под монитор</h1>

CSS-код:

Quote

Где:
-moz-background-size:100% 100%; - для Firefox 4+.
-o-background-size:100% 100%; - для Opera 9.5+.
-webkit-background-size:100% 100%; - для Safari 5+ и Chrome 4+.
-khtml-background-size:100% 100%; - для Konqueror (WebKit-браузеров).
background-size:100% 100%; - CSS3 свойство.
...

☑ Пример ....
...

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

Quote

@-moz-document url-prefix(){
#headLogo{background:url(_st/v00_h_some_big_img.jpg) no-repeat center top;} /* Заведомо большая/другая картинка/фон */
}

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

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

☑ Пример ....
...

Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 01:41:22

fflesh

Сообщений: 1784

Репутация: 1314

Сообщение # 3 | 00:35:09 10 Мар 2011

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

Изменение стиля блока посредством добавления новых правил в зависимости от разрешения экрана пользователя.

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

Принцип - тот же, реализация - другая.
Вот и все.

Вариант №1:
- Определяем разрешение окна браузера, и прописываем стили, при загрузке страницы.

HTML-код:

Code

<h1 id="headLogo">Уголок аццкого кодера. Резиновые изображения, подстройка картинок под монитор</h1>

CSS-стили:

Code

JavaScript:

Code

...
Где:
if(oWidth>1024&&oWidth<=1152){} - определяем в какой диапазон входит текшее разрешение экрана клиента.
obj.style.backgroundImage='url(_st/'+src+')'; - устанавливаем блоку необходимые стили - фоновое изображение и высоту.
...

☑ Пример ...
...

Вариант №2:
- Определяем разрешение окна браузера, и прописываем ссылку на внешнюю таблицу стилей, при загрузке страницы.
Плюс этого варианта - можно поменять дизайн вообще полностью.

HTML-код:

Code

<h1 id="headLogo">Уголок аццкого кодера. Резиновые изображения, подстройка картинок под монитор</h1>

CSS-стили:

Code

Содержание внешней таблицы стилей:

Code

#headLogo{background-image:url(v01_h_1152x191.jpg);height:191px;}

JavaScript:

Code

Где:
var oWidth=document.documentElement.clientWidth; - определяем переменную и задаём ей параметр, равный ширине окна клиента.
if(oWidth<=1024){var res=800;} - проверяем, входит ли разрешение клиента в установленный диапазон, и, если входит, устанавливаем определённое значение переменной «res».
document.write('<link rel="stylesheet" href="\/_content\/_ext\/img-bg\/_st\/'+res+'.css">'); - вписываем в документ ссылку на нужные стили.
...

Примечание:
Ширина окна определяется во время загрузки страницы, и ссылка на вешнюю таблицу стилей прописываются единожды на загрузку.

☑ Пример ...
...

Вариант №2-2:
- То же самое, но более грамотно:

HTML-код:

Code

<h1 id="headLogo">Уголок аццкого кодера. Резиновые изображения, подстройка картинок под монитор</h1>

CSS-стили:

Code

Содержание внешней таблицы стилей:

Code

#headLogo{background-image:url(v01_h_1152x191.jpg);height:191px;}

JavaScript:

Code

☑ Пример ...

Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 07:52:46

fflesh

Сообщений: 1784

Репутация: 1314

Сообщение # 4 | 00:37:38 10 Мар 2011

Вариант №3:
- Определяем разрешение окна браузера, и устанавливаем/изменяем класс для <body/>, при загрузке и ресайзе страницы.

HTML-код:

Code

<h1 id="headLogo">Название сайта</h1>

CSS-стили:

Code

JavaScript:

Code

...
Где:
document.body.className - устанавливаем тегу <body/> класс из буковки «m» и переменной «res». Получится вот это: «class="m1024"»
window.onresize=setScreenClass; - повторяем функцию при ресайзе окна.
...

☑ Пример ...
...
Примечание:
В программном коде, к которому относится и JavaScrpt, спец символы необходимо экранировать.
Символ называется «специальным», если он несет дополнительную смысловую нагрузку.
Экранирование - замена в тексте спец-символов на соответствующие текстовые подстановки.
Внутри строк это осуществляется с помощью символа «\» - обратный слеш, который сообщает интерпретатору, что следующий за ним символ должен восприниматься как обычный символ, а не как оператор/спец символ.
При этом символ «\» может экранировать себя, то есть для вывода бэкслеша используется комбинация «\\».

Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 07:56:05

fflesh

Сообщений: 1784

Репутация: 1314

Сообщение # 5 | 00:40:57 10 Мар 2011

Изменение стиля блока посредством JavaScript - поистине неисчерпаемая тема, как приёмами, так и методами воздействия на отображения элемента.
Следовательно, здесь рассмотрены далеко не все возможные варианты, лишь основные..

Хотел бы ещё затронуть такую тему, как фоновое изображение страницы, и динамическое изменение его параметров, в зависимости от разрешения экрана пользователя.
А именно:
* изображение должно полностью заполнять фон страницы, независимо от разрешения экрана;
* должно, по возможности, сохранять пропорции (соотношение сторон); ^{(позже будет понятно, почему написано “по возможности”)}
* изображение НЕ должно вызывать скроллинга (полос прокрутки);
...

Изменение фона страницы посредством CSS3 свойства «background-size»

Как и было упомянуто выше, с приходом CSS3, а именно свойства «background-size», сделать это достаточно просто.
Напомню: свойство «background-size» поддерживается основными современными браузерами - Internet Explorer 9, Firefox 4 +, Opera 9.5 +, Safari 5 +, Chrome 4+, Konqueror 3.5.4 +.

HTML-код:
- не нужен, так как работаем только с тегом <html />.
- если что - смотрим исходник ...
...

CSS-стили:

Quote

Где:
html,body{background-color:transparent;} - задаём «html» и «body» фоновый цвет - прозрачный - дабы картинка просвечивала.
html{..... no-repeat center center fixed;...} - задаём фоновую картинку Html, фиксируем её по центру, запрещаем повторятся.
html{background-size:cover;} - назначаем CSS3 свойству background-size значение «cover» - масштабировать изображение с сохранением пропорций по max размерам (ширине или высоте - что больше) блока - в данном Html.

Internet Explorer, как “особо одарённый”, требует для себя индивидуальный “костыль” - то бишь фильтр, который будет имитировать динамический фон:
Прописываем:
html{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_content/_ext/img-bg/_st/fon_v0.jpg', sizingMethod='scale');.
- Вот это - желательно вынести в отдельные, только для ИЕ, стили (или закомментировать) - не валидно.

Теперь, всё это работает и в ИЕ, включая шестую версию.
....

☑ Пример ...

Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 01:45:43

fflesh

Сообщений: 1784

Репутация: 1314

Сообщение # 6 | 00:43:59 10 Мар 2011

Изменение фона страницы посредством позиционированного изображения.

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

Также, добавляется min-width ширины изображения таким образом, чтобы изображение никогда не будет меньше, своего фактического размера.

Дабы она не находилась на переднем плане, саму картинку и блок-обёртку смещают по z-оси на задний план (z-index:-1).

Также, используется @media screen and (max-width:1024px), которое корректирует положение картинки, если окно обозревателя меньше изображения, используя комбинацию процентной величины левого положения и отрицательного левом поля.

Короче, вот так:

HTML-код:

Code

- Добавляется после контента, перед закрывающим </body>.

CSS-стили:

Code

#imgBg{display:block;position:fixed;top:0;left:0;min-height:100%;min-width:1024px;width:100%;height:auto;z-index:-1;}
@media screen and (max-width:1024px) {#imgBg{left:50%;margin-left:-512px;}}

☑ Пример ...
...
☑ И ещё один кроссбраузерный пример (тянем от левого верхнего угла, с небольшим смещением) ...
...

Примечание:
Нужно понимать, что масштабирование большого изображения, тем более зафиксированного неподвижным фоном, снижается производительность браузера.
Кроме того, чтобы не терялось качество при больших разрешениях экрана, изображение лучше использовать с максимальными размерами, а такие картинки могут весить очень много.

Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 01:42:23

Дилос

Сообщений: 3

Репутация: 5

Сообщение # 7 | 00:44:09 10 Мар 2011

Проблема

Я хотел узнать можно ли сделать оптимизацию фона сайта под различные мониторы, что бы, например, если фоновое изображение 1600 на 1200 пикселей, не смотрелось убого на 1024 на 768, из-за того, что там и половины не влезает, а подстраивалось под нужный размер экрана, как это например происходит на наших рабочих столах, когда выбираешь обоину, она сама подстраивается под нужный тебе размер экрана, а не обрезается, отбрасывая всё, что не вошло. Буду благодарен за помощь, если кто знает.

Решение

Как это сделать? Читаем здесь (пример как работает)

Сообщение отредактировал Дилос - Среда, 01 Июл 2009, 11:26:40

o_Lisovenko

uProduct

Сообщений: 4704

Сообщение # 8 | 00:44:19 10 Мар 2011

Вопрос

"Шапка" заполняет всё пространство только в полноэкранном режиме браузера, а стоит возвратиться в обычный, как включается горизонтальный лифт и картинка перестаёт доходить до правой стороны, т.е. остаётся свободное поле. Помогите, знающие люди!

Ответ

Просто картинку нужно нарезать и часть сделать фоном ячейки.

o_Lisovenko

uProduct

Сообщений: 4704

Сообщение # 9 | 00:44:29 10 Мар 2011

фиксированный фон сайта

Code

uSocial.pro - лучшие кнопки соц. сетей для Вашего сайта!

Admin3558

Сообщений: 8

Репутация: 0

Сообщение # 10 | 14:30:35 01 Ноя 2011

Здравствуйте!
Я всё прочитала, но ничего не поняла(((
Вот страница сайта http://blackguest.ucoz.ru/index....-27
Делалась она на широкоформатном экране (на ноутбуке), все выглядит красиво, но на обычном мониторе все фотографии смешанны, некоторые заходят друг на друга, в общем абсолютно всё вперемешку и не возможно разобрать кто где.
Пожалуйста, подскажите, куда и какой код надо вставить, что бы при любом размере монитора сайт смотрелся одинаково хорошо.
Если конечно такое вообще возможно.
Если так сделать возможно, пожалуйста, напишите как чайнику, все шаги поэтапно.
Заранее спасибо!

Miss_Esq

Сообщений: 13859

Репутация: 4159

Уровень замечаний:

Сообщение # 11 | 08:08:53 02 Ноя 2011

Admin3558,

Quote

Если конечно такое вообще возможно.

Возможно всё , почти ...
Переделывать страницу , вариантов нет ... У вас там столько мусора HTML , после 500 не стала дальше считать . Это последствие работы в визуальном режиме редактора ..

Делайтн проще , в HTML режиме , в таком виде всё будет значительно лучше ...

Quote

<table style="width: 100%; text-align: center; font: bold 12pt Arial, Tahoma, Verdana, sans-serif;">
<tr>
<td style="color: #c9e7f3; width: 65%;">Тиджей Фрост Фром Магнификос Кингдом<br>Без ленточки<br><br><img src="http://blackguest.ucoz.ru/schenki/izobrazhenie_008.jpg" alt="щенки лабрадора" style="width: 100%;"></td>
<td><img src="http://blackguest.ucoz.ru/schenki/izobrazhenie_034.jpg" alt="щенки лабрадора" style="width: 100%;"></td>
</tr>
</table>
<hr>

geometriya ISO 3166-2 DEE

dj-vblack

Сообщений: 19

Репутация: 5

Сообщение # 12 | 02:14:09 24 Ноя 2011

Скажите пожалуйста,что нужно сделать,чтобы блоки,с правой части сайта начинались на том-же уровне,что и меню с лева!!!???
Сайт: www.valentineblack.tk Заранее спасибо....

black

Сообщение отредактировал dj-vblack - Четверг, 24 Ноя 2011, 07:47:22

Miss_Esq

Сообщений: 13859

Репутация: 4159

Уровень замечаний:

Сообщение # 13 | 11:23:30 25 Ноя 2011

dj-vblack, Не дублируйте вопросы в разных темах , встречный ворос на ваше сообщение в другой теме ...

geometriya ISO 3166-2 DEE

Alex2864

Сообщений: 3

Репутация: 9

Сообщение # 14 | 17:35:36 07 Янв 2012

Здравствуйте очень нужна Ваша помошь!
Подскажите, как сделать так, чтобы у пользователей с различным различными размерами мониторов сайт отображался одинакого? Я делал сайт на мониторе с разрешением 1920 на 1080 - у меня все нормально без полосы прокрутки, а на мониторе с меньшем разришением появляется полоса прокрутки ширины! Не хочу, чтобы была полоса прокрутки!
Вот ссылка http://vhk-isuct.ucoz.ru/.
Спасибо!

webanet

Сообщений: 24067

Репутация: 4985

Сообщение # 15 | 17:51:56 07 Янв 2012

Alex2864, ваша шапка размером 1,870px × 141px растягивает сайт. прочитайте всю тему внимательно в которой пишете
и не стоит дублировать одно и тоже сообщение в разных темах форума

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/

Подстройка размера картинки под разрешение экрана (Подстройка размера изображения под разрешение экрана)

Страница 1 из 16
1
2
3
…
15
16
»