• Страница 1 из 16
  • 1
  • 2
  • 3
  • 15
  • 16
  • »
Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Подстройка размера картинки под разрешение экрана (Подстройка размера изображения под разрешение экрана)
Подстройка размера картинки под разрешение экрана
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 1 | 23:56:47
Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (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
<style type="text/css">
/* StartStyle */
#headerTb{border-collapse:collapse;border-spacing:0;background:#1552ca url(_st/v00_h_bg.jpg) repeat-x left top;height:121px;}
td.hdLeft{background:url(_st/v00_h1.jpg) no-repeat left top;width:auto;vertical-align:top;}
td.hdRight{background:url(_st/v00_h2.jpg) no-repeat right top;width:445px;}
/* EndStyle */
</style>

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

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


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


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

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

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

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

Пример ...

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


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

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

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

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

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

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

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

HTML-код:
Code
<table id="headerTb" width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td class="hdImg"><img class="topImg" src="/_content/_tpl/v00/_st/v00_h_1200.jpg" border="0" alt="" /></td>
</tr></table>


CSS-стили (изображение масштабируется пропорционально)
Quote (CSS)
<style type="text/css">
/* StartStyle */
#header{ height:auto;}
#headerTb{border-collapse:collapse;border-spacing:0;table-layout:fixed;background-color:#1552ca;height:121px;}
#headerTb img.topImg{width:100%!important;height:auto!important;-ms-interpolation-mode:bicubic;}
td.hdImg{vertical-align:top;}
/* EndStyle */
</style>


CSS-стили (изображение масштабируется линейно - в ширину)
Quote (CSS)
<style type="text/css">
/* StartStyle */
#header{ height:auto;}
#headerTb{border-collapse:collapse;border-spacing:0;table-layout:fixed;background-color:#1552ca;height:121px;}
#headerTb img.topImg{width:100%!important;height:125px!important;-ms-interpolation-mode:bicubic;}
td.hdImg{}
/* EndStyle */
</style>


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

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

И ещё:
Не все браузеры умеют правильно масштабировать изображения.
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
<style type="text/css">
/* StartStyle */
#header{height:auto;}
#wrapBox{position:relative;width:100%;height:auto;z-index:0;}
#selfBox{width:100%;position:absolute;}
#wrapBox img.topImg{display:block;position:relative;top:0;left:0;width:100%;height:100%;z-index:-1;}
/* EndStyle */
</style>


Пример ...

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

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

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 2 | 00:30:22
Изменение всего вида элементов методом динамического добавления/изменения стилей.

Изменение стиля блока посредством 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
<style type="text/css">
/* StartStyle */
#headLogo{width:100%;height:125px;overflow:hidden;text-indent:-999em;background:url(_st/v00_h.jpg) no-repeat center top; /* Основные параметры блока*/
-moz-background-size:100% 100%;
-o-background-size:100% 100%;
-webkit-background-size:100% 100%;
-khtml-background-size:100% 100%;
background-size:100% 100%;

}
/* EndStyle */
</style>

Где:
-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, лишнее скроется.

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


Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 01:41:22
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 3 | 00:35:09
Изменение всего вида элементов методом динамического добавления/изменения стилей.

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

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

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

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

HTML-код:

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

CSS-стили:

Code
<style type="text/css">
/* StartStyle */
#header{height:auto;}
#headLogo{width:100%;height:121px;overflow:hidden;text-indent:-999em;background:no-repeat center top;} /* Основные параметры блока*/
#headLogo{background-image:url(_st/v01_h_800x133.jpg);} /* Фон по умолчанию */
/* EndStyle */
</style>

JavaScript:

Code
<script type="text/javascript">
function setScreenBg(){   
var obj=document.getElementById('headLogo'),oWidth=document.documentElement.clientWidth,oHeight,src;    
if(oWidth<=1024){oHeight='133px';src='v01_h_800x133.jpg'}
else{if(oWidth>1024&&oWidth<=1152){oHeight='170px';src='v01_h_1024x170.jpg'}
else if(oWidth>1152&&oWidth<=1280){oHeight='191px';src='v01_h_1152x191.jpg'}
else{oHeight='233px';src='v01_h_1400x233.jpg'}};
obj.style.backgroundImage='url(_st/'+src+')';
obj.style.height=oHeight;
};
window.onload=function(){setScreenBg();};               
window.onresize=setScreenBg;   
</script>

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

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

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

HTML-код:

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

CSS-стили:

Code
<style type="text/css">
/* StartStyle */
#header{height:auto;}
#headLogo{width:100%;height:121px;overflow:hidden;text-indent:-999em;background:no-repeat center top;} /* Основные параметры блока*/
#headLogo{background-image:url(_st/v01_h_800x133.jpg);} /* Фон по умолчанию */
/* EndStyle */
</style>

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

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

JavaScript:

Code
<script language="JavaScript" type="text/javascript">
var oWidth=document.documentElement.clientWidth;
var res='';
if(oWidth<=1024){var res=800;}
else{if(oWidth>1024&&oWidth<=1152){var res=1024;}
else if(oWidth>1152&&oWidth<=1280){var res=1152;}
else{var res=1280;}
};
document.write('<link rel="stylesheet" href="\/_content\/_ext\/img-bg\/_st\/'+res+'.css">');
</script>

Где:
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
<style type="text/css">
/* StartStyle */
#header{height:auto;}
#headLogo{width:100%;height:121px;overflow:hidden;text-indent:-999em;background:no-repeat center top;} /* Основные параметры блока*/
#headLogo{background-image:url(_st/v01_h_800x133.jpg);} /* Фон по умолчанию */
/* EndStyle */
</style>

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

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

JavaScript:

Code
<script language="JavaScript" type="text/javascript">
function addStyle(a){
var c=document.createElement('link');
c=document.getElementsByTagName('head')[0].appendChild(c);
c.setAttribute('type','text/css');c.setAttribute("rel","stylesheet");
c.setAttribute('href',a);
};
function setScreen(){
var oWidth=document.documentElement.clientWidth;
var res='';
if(oWidth<=1024){var res=800;}
else{if(oWidth>1024&&oWidth<=1152){var res=1024;}
else if(oWidth>1152&&oWidth<=1280){var res=1152;}
else{var res=1280;}
};
addStyle('/_content/_ext/img-bg/_st/'+res+'.css');
};
window.onload=function(){setScreen();};             
/*window.onresize=setScreen;*/
</script>

Пример ...


Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 07:52:46
fflesh
Сообщений: 1784
Репутация: 1314

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

HTML-код:
Code
<h1 id="headLogo">Название сайта</h1>


CSS-стили:
Code
<style type="text/css">
/* StartStyle */
#header{height:auto;}
#headLogo{width:100%;height:121px;overflow:hidden;text-indent:-999em;background:no-repeat center top;} /* Основные параметры блока*/
#headLogo{background-image:url(_st/v01_h_800x133.jpg);}/* Фон по умолчанию */
/* 800x600 | 1024x768 | 1152x864 | 1280x1024 | 1400x1050 */
body.m800 #headLogo{background-image:url(_st/v01_h_800x133.jpg);height:133px;}
body.m1024 #headLogo{background-image:url(_st/v01_h_1024x170.jpg);height:170px;}
body.m1152 #headLogo{background-image:url(_st/v01_h_1152x191.jpg);height:191px;}
body.m1280 #headLogo{background-image:url(_st/v01_h_1400x233.jpg);height:233px;}
/* EndStyle */
</style>


JavaScript:
Code
<script type="text/javascript">
function setScreenClass(){
var oWidth=document.documentElement.clientWidth,res='';
if(oWidth<=1024){var res=800;}
else{if(oWidth>1024&&oWidth<=1152){var res=1024;}
else if(oWidth>1152&&oWidth<=1280){var res=1152;}
else{var res=1280;}};
document.body.className='m'+res;/*class="m1024"*/
};
window.onload=function(){setScreenClass();};   
window.onresize=setScreenClass;
</script>

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

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

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 07:56:05
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 5 | 00:40:57
Изменение стиля блока посредством 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
<style type="text/css">
/*StartStyle*/
html,body{background-color:transparent;}
html{background:transparent url(_st/fon_v0.jpg) no-repeat center center fixed;
-moz-background-size:cover; /*Gecko 1.9.2 (Firefox 3.6)*/
-o-background-size:cover; /* Opera 9.5 */
-webkit-background-size:cover; /* Safari 3.0 */
-khtml-background-size:cover; /* Konqueror 3.5.4 */
background-size:cover; /* CSS3 */
}
html{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_content/_ext/img-bg/_st/fon_v0.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_content/_ext/img-bg/_st/fon_v0.jpg',sizingMethod='scale')";}
/*EndStyle*/
</style>

Где:
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');.
- Вот это - желательно вынести в отдельные, только для ИЕ, стили (или закомментировать) - не валидно.

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

Пример ...


Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 01:45:43
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 6 | 00:43:59
Изменение фона страницы посредством позиционированного изображения.

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

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

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

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

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

HTML-код:
Code
<img id="imgBg" src="/_content/_ext/img-bg/_st/ff11_3.jpg" alt="" />

- Добавляется после контента, перед закрывающим </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;}}


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

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

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Четверг, 10 Мар 2011, 01:42:23
Дилос
Сообщений: 3
Репутация: 5

Сообщение # 7 | 00:44:09
Проблема

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

Решение

Как это сделать? Читаем здесь (пример как работает)
Сообщение отредактировал Дилос - Среда, 01 Июл 2009, 11:26:40
o_Lisovenko
uProduct
Сообщений: 4704

Сообщение # 8 | 00:44:19
Вопрос

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

Ответ

Просто картинку нужно нарезать и часть сделать фоном ячейки.
o_Lisovenko
uProduct
Сообщений: 4704

Сообщение # 9 | 00:44:29
фиксированный фон сайта

Code
<body background="ИЗОБРАЖЕНИЕ" style="background-attachment: fixed">

Admin3558
Сообщений: 8
Репутация: 0

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

Сообщение # 11 | 08:08:53
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>

dj-vblack
Сообщений: 19
Репутация: 5

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

black
Сообщение отредактировал dj-vblack - Четверг, 24 Ноя 2011, 07:47:22
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 13 | 11:23:30
dj-vblack, Не дублируйте вопросы в разных темах , встречный ворос на ваше сообщение в другой теме ...

Alex2864
Сообщений: 3
Репутация: 9

Сообщение # 14 | 17:35:36
Здравствуйте очень нужна Ваша помошь!
Подскажите, как сделать так, чтобы у пользователей с различным различными размерами мониторов сайт отображался одинакого? Я делал сайт на мониторе с разрешением 1920 на 1080 - у меня все нормально без полосы прокрутки, а на мониторе с меньшем разришением появляется полоса прокрутки ширины! Не хочу, чтобы была полоса прокрутки!
Вот ссылка http://vhk-isuct.ucoz.ru/.
Спасибо!
webanet
Сообщений: 24067
Репутация: 4985

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

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Подстройка размера картинки под разрешение экрана (Подстройка размера изображения под разрешение экрана)
  • Страница 1 из 16
  • 1
  • 2
  • 3
  • 15
  • 16
  • »
Поиск: