Модератор форума: 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
Santree
Сообщений: 4
Репутация: 0

Сообщение # 31 | 14:21:49
Огромное вам спасибо!!! Уйму времени на эту ерунду потратил,и если бы не вы,еще бы столько же мучился. Еще раз спасибо!
stapark
Сообщений: 8
Репутация: 2

Сообщение # 32 | 08:29:02
Всем доброго дня! Помогите настроить шапку с надписью "творческое объединение Старый парк", не подстраивается под разрешение экрана, появляется горизонтальная полоса прокрутки, уже неделю бьюсь с этой проблемой.
Сайт http://www.stapark.ru/
Вот код шапки:

Quote
<table style="background:url('/.s/t/721/1.gif') #B6CEEB;" border="0" cellpadding="0" cellspacing="0" height="50" width="100%">
<tbody><tr><td width="255"><img src="/.s/t/721/2.jpg" border="0"></td><td class="topLink"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!--<s3167>-->Группа<!--</s>--> "<u>$USER_GROUP$</u>"<?else?><!--<s5212>-->Приветствую Вас<!--</s>--> <b>$USERNAME$</b><?endif?><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$">RSS</a><?endif?></td><td style="background:url('/.s/t/721/3.jpg') right no-repeat;padding-right:100px;" align="right">$WDAY$, $DATE$, $TIME$</td></tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" height="139" width="1348">
<tbody><tr><td width="255"><img src="/.s/t/721/4.jpg" border="0"></td><td style="table-layout: auto; text-align: left; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt; width: 100%; height: 100%;"><span style="color: rgb(219, 65, 4); font: 20pt Comic Sans MS;"><b><!-- <logo> --></b></span>
<a href="http://www.stapark.ru"><img alt="" src="/baner_new.jpg" height="128" width="auto"></a><br>
<a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a> <?if($MODULE_URL$)?>| <a href="$MODULE_URL$">$MODULE_NAME$</a>
<?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a><?else?> |
<a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> |
<a href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a><?else?> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a><?endif?><?endif?></td>
<td style="background:url('/.s/t/721/5.jpg') right no-repeat;" width="320" align="center"><span style="font-size: 14pt;"><b>Контакты:</b></span>
<br>позвонить<br><b> 8-902-47-47-004,</b><br>написать<br><b>stapark@yandex.ru</b><br><br></td></tr>
</tbody></table>
bandjuk
Сообщений: 6816
Репутация: 2398
Уровень замечаний:

Сообщение # 33 | 15:21:42
stapark, в этой строке:
Quote
<table border="0" cellpadding="0" cellspacing="0" height="139" width="1348">

пропишите так:

Quote
<table border="0" cellpadding="0" cellspacing="0" height="139" width="100%">
stapark
Сообщений: 8
Репутация: 2

Сообщение # 34 | 09:45:10
Quote
bandjuk

Спасибо, всего и делов то оказывается..........
Kisya
Сообщений: 3
Репутация: 3

Сообщение # 35 | 00:39:29
Доброй ночи. Прошу прощения если где-то это уже было.
Никак не получается выровнять сайт. (www.lrteam.clan.su)
Что только не пробовала. Весь перекашивает.
Прошу помочь, если возможно!!!
bandjuk
Сообщений: 6816
Репутация: 2398
Уровень замечаний:

Сообщение # 36 | 02:14:54
Kisya, вот часть исходника:
Quote
<td style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px" valign="top"><!--Body-->
<div id="myGrid" style="display:none;">
<div style="position:fixed;width:100%;text-align:center;padding-top:250px;">
<img alt="" src="http://s14.ucoz.net/img/ma/m/i3.gif" border="0" width="220" height="19" /></div></div>
<script type="text/javascript">function spages(p){if (1){document.location.href='http'+'://lrteam.clan.su/news/'+p; return;}try{document.getElementById('myGrid').style.cssText = 'position:absolute; z-index:8; top:0;left:0; display:block; background: url(\'http://s14.ucoz.net/img/fr/g.gif\'); text-align:center; width:'+document.body.scrollWidth+'px; height:'+document.body.scrollHeight+'px;';}catch(e){}_uPostForm('',{url:'http'+'://lrteam.clan.su/index/0-0-0-'+p+'-'+Math.floor(Math.random()*1e8)});}</script><div id="allEntries"><div align="right" class="catPages1" align="center" style="clear:both;" id="pagesBlock1"><b class="swchItemA"><span>1</span></b>
<a class="swchItem" href="http://lrteam.clan.su/news/2" onclick="spages('2');return false;"><span>2</span></a>
<a class="swchItem" href="http://lrteam.clan.su/news/3" onclick="spages('3');return false;"><span>3</span></a>
<a class="swchItem" href="http://lrteam.clan.su/news/4" onclick="spages('4');return false;"><span>4</span></a>
<a class="swchItem" href="http://lrteam.clan.su/news/5" onclick="spages('5');return false;"><span>5</span></a>
<a class="swchItem" href="http://lrteam.clan.su/news/6" onclick="spages('6');return false;"><span>6</span></a>
<a class="swchItem" href="http://lrteam.clan.su/news/2" onclick="spages('2');return false;"><span>»</span></a></div>
<div id="entryID191"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock">
<tr><td <table style="width: 100%>
<div class="eTitle" style="text-align:left;"><a href="http://lrteam.clan.su/news/vazhno/2012-05-05-191">!!!ВАЖНО!!!</a></div>
<div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"><div style="text-align: center;"><img alt="6/05" src="/2012/novosti/29480.jpg" align="absMiddle" height="358" width="563"></div></div>
<div class="eDetails" style="clear:both;">
Просмотров: 3 |
Добавил: <a href="javascript://" rel="nofollow" onclick="window.open('http://lrteam.clan.su/index/8-1','up1','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">Kisya</a> |
Дата: <span title="21:47">Вчера</span>
| <a href="http://lrteam.clan.su/news/vazhno/2012-05-05-191#comments">Комментарии (0)</a>
</div></td></tr></table><br /></div>


строка:
Quote
<td <table style="width: 100%>

не закрыта ячейка и не закрыта скобка, нужно так (в каждой новости):
Quote
<td> <table style="width: 100%">


где искать? Скорее всего, в ПУ -- новости сайта --- вид материалов.

Дальше выяснять не стал, исправьте это, а там будет видно!
Kisya
Сообщений: 3
Репутация: 3

Сообщение # 37 | 02:28:43
Спасибо!!! Вроде исправила, но что т не очень помогло. Щас еще гляну, может попадется что.
bandjuk
Сообщений: 6816
Репутация: 2398
Уровень замечаний:

Сообщение # 38 | 02:33:10
Kisya, что ещё не так?
сайт расстянут из-за строки в ксс:
Quote
div#logo {height:151px;background:url('http://lrteam.clan.su/sbrod/3_list.jpg') no-repeat;padding-left:1266px;}

поставь так:
Quote
div#logo {height:151px;background:url('http://lrteam.clan.su/sbrod/3_list.jpg') no-repeat;padding-left:700px;}

и из-за этой картинки http://lrteam.clan.su/_nw/1/24679656.jpg
уменьши её размер и всё будет окей!
Сообщение отредактировал bandjuk - Воскресенье, 06 Май 2012, 02:40:12
Kisya
Сообщений: 3
Репутация: 3

Сообщение # 39 | 02:47:04
Спасибо огромное!!! Теперь буду разбираться с остальными страницами))))
munfe
Сообщений: 6
Репутация: 20

Сообщение # 40 | 18:54:40
Доброго времени суток !
Такая проблема:
есть фон - 1, который должен повторяться (с этим всё OK)
есть фон - 2, который ставится поверх (разрешение png т.к. местами прозрачна \ размером 1600px), он же должен меняться в зависимости от разрешения экрана
пробовал по разному, никак не получается сделать чтобы меняла размер
1 пример
Code
<style type="text/css">
.wow .wrapper-top { background: url(../images/bgUP.png) 50% top no-repeat;}
.wow .wrapper-bottom { background: url(../images/bgUP.png) 50% bottom no-repeat;}
</style>
</head>

<body class="wow">
<div class="wrapper-top">
<div class="wrapper-bottom">
<div id="content">Здесь располагается содержимое  id "content"</div>
</body>
</html>

2 пример
Quote
</head>

<body>
<div id="bg1"></div>
<div id="bg2"></div>
<div id="content">Здесь располагается содержимое  id "content"</div>
</body>
</html>

Это у меня в CSS

/*Фон*/
#bg1 {position:fixed; top:0; bottom:0; left:0; right:0; background-image:url(../images/bg.png);z-index:-2;}
#bg2{;
background-image: url(../images/bgUP.png);
display: block;
position: fixed;
top: 0;
left: 0;
min-height: 100%;
min-width: 1024px;
width: auto;
height: auto;
z-index: -1;
background-repeat: no-repeat;
}
@media screen and (max-width:1024px) {#bg2{left:100%;margin-left:-512px;}}
/*Фон - конец*/
#content {position:absolute; top:0; bottom:0; left:0; right:0;}

Подскажите правильный код (у меня 1280px разрешение на мониторе).
Сообщение отредактировал munfe - Четверг, 14 Июн 2012, 18:58:34
olegsuv
Сообщений: 1365
Репутация: 127

Сообщение # 41 | 19:02:02
munfe, background-size пробуйте

Любые работы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 42 | 19:03:35
munfe,

munfe
Сообщений: 6
Репутация: 20

Сообщение # 43 | 19:13:17
Quote
<body>
<div style=" position: relative; top: 0px; left: 0px; background: #fff url('../images/bg.png') repeat-y fixed left top; width: 100%; height: 200px;">
<img alt="" src="../images/bgUP.png" style="position: absolute; width: 50%; height: 200px; z-index: 1;">
<div id="content" style="position: absolute; width: 100%; height: 200px; z-index: 2;">Здесь располагается содержимое id "content"</div></div>
</body>
не выходит, что то не так делаю? Не давно css начал изучать*
Сообщение отредактировал munfe - Четверг, 14 Июн 2012, 19:26:20
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 44 | 19:33:50
munfe, где это ставите ? адрес ..

ссылки пишутся без точек ...

.. /images/bgUP.png


Сообщение отредактировал Miss_Esq - Четверг, 14 Июн 2012, 19:34:49
munfe
Сообщений: 6
Репутация: 20

Сообщение # 45 | 19:37:38
в Dreamweawer, так .. это выход из папки
---------
Все ок, спс разобрался. Почемуто в dm не показывало.
Сообщение отредактировал munfe - Четверг, 14 Июн 2012, 20:07:24
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Подстройка размера картинки под разрешение экрана (Подстройка размера изображения под разрешение экрана)
Поиск: