Чат сообщества
   | |
| Модератор форума: Yuri_G |
| Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Подстройка размера картинки под разрешение экрана (Подстройка размера изображения под разрешение экрана) |
| Подстройка размера картинки под разрешение экрана |
|
Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (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 |
|
Alex2864,
Quote Не хочу, чтобы была полоса прокрутки! Тогда вам прямой путь , сменить тип макета страниц сайта , либо на резиновый ( просто ) , либо на динамично эластичный ( сложно или относительно просто в зависимости от уровня знаний в области HTML , CSS и опыта вёрстки .. ) |
|
webanet, извините пожалуйста, что дублирую тему, но если бы я понял, я бы не спросил! Если вы мне можете помоч, помогите! Обьясните подробно!
Спасибо! Добавлено (07-Янв-2012, 17:59:14) |
|
Alex2864, Изначально резиновый дизайн должен быть свёрстан под разрешение 1024px, как минимальное разрешение на данный момент времени ещё имеющим значение в процентноим отношении. Потм просто ширмна родительского элемента задаётся равной 100%. Вот собственно ии всё . Это самый простой случай.
Но у этого типа макета есть недостатки - Читать ЛС. |
|
Не знал куда свой вопрос задать...Скорее всего в эту тему. Тем более, что автор топа создаёт впечатление достаточно грамотного специалиста...
Верстал сайт в FireFox-е на экране 21". И всё было хорошо, пока не открыл заготовку у сына на компе (у него 17" монитор). Возникли две довольно существеные проблемы: 1. Сайт "не влез в его экран". т.е. смотрелся с появившимся ползунком горизонтальной прокрутки. Пришлось урезать вставленные в боковые блоки фото информеры с 3- колонок до 2-х, что весьма расстроило... Вопрос: как настроить стили, таблицы...чтобы всё вмещалось, то есть контент адекватно сжимался по максимуму, прежде чем показывать горизонтальный ползунок.? 2. При открывании сайта в ИЕксплоере, твориться вообще что-то жуткое! Что-то раздвигает в размер сайта в ширину аж в 2 раза!!! Пробовал в Хроме - нормально всё, в Фоксе - тоже, только в ИЕ такая байда.... Что делать с этим?  Вот сайт: тыкс |
|
Quick,
Quote (Quick) Вопрос: как настроить стили, таблицы...чтобы всё вмещалось, то есть контент адекватно сжимался по максимуму, Чтобы «все» ... ))) Нет, не правильно поставлен вопрос. Если нужно пропорционально сжать картинки, это одно, но чтобы запихнуть сайт предназначенный под монитор 21′′ в 17′′ ... это немного другое. А тема всего лишь: Подстройка размера картинки под разрешение экрана .... У вас основная проблема - это картинки, которые необходимо сделать не фиксированными. Тогда сайт впишется в разрешение: какое вам нужно? ... 17′′ это относительный размер. ... Про ИЕ - это вообще не по теме. ... Оптимизация дизайна под разные браузеры Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
|
Quote (fflesh) У вас основная проблема - это картинки, которые необходимо сделать не фиксированными. Тогда сайт впишется в разрешение: какое вам нужно? ... 17′′ это относительный размер. Звучит красиво! И наверняка через месячишко я буду это делать с закрытыми глазами и одним пальцем)...А сейчас, не могли бы вы подсказать, как сделать картинки "нефиксированными"? Quote Про ИЕ - это вообще не по теме. ... Оптимизация дизайна под разные браузеры Ух, тема там гигантская, пойду читать.. |
|
Подскажите пожалуйста,как сделать вот на этом сайте http://33cheap.at.ua/ лого на розовом фоне,чтобы оно при сужении браузера,сужалось вместе с ним,и подходило под другое расширение экрана.Я уже вторую ночь сижу и пытаюсь разобраться,никак не получается..Перечитал уже пару раз этот тему и что-то я не могу понять,в чём же дело. Желательно конкретный пример,а то придётся ещё пару ночей просидеть.Спасибо.
В опере тоже к стати отображается подругому... Сообщение отредактировал libero23 - Вторник, 21 Фев 2012, 06:13:19
|
|
libero23,
Quote (libero23) Подскажите пожалуйста,как сделать вот на этом сайте http://33cheap.at.ua/ лого на розовом фоне,чтобы оно при сужении браузера,сужалось вместе с ним,и подходило под другое расширение экрана. А оно не сужается, о чем вы говорите.... А сделано просто - блок с фоной картинкой, и картинка справа - ягуар там, или пума.... тоже фоном ... Вот первая - что фоном: _http://33cheap.at.ua/.s/t/926/3.gif Вот вторая - что кошка _http://33cheap.at.ua/h2.png ... Ух ты, там даже три сделали, ну ваще ... ... Ничего интересного, короче. ... Quote (libero23) Желательно конкретный пример,а то придётся ещё пару ночей просидеть. На конкретный пример вы сами ссылку дали - копируй да вставляй) ... ... Вот готовый код, как пример Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> </head> <body style="margin:0;padding:0;vertical-align:top;"> <div style="background:url(http://33cheap.at.ua/.s/t/926/3.gif) no-repeat left bottom; overflow:hidden;"> <div style="float:right;height:164px;text-align:right;clear:both;background:url(http://33cheap.at.ua/h4.png) no-repeat left bottom;"> <img src="http://33cheap.at.ua/h2.png" width="200" height="87" border="0" alt="" /> </div> </div> </body> </html> ... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Вторник, 21 Фев 2012, 08:17:36
|
|
libero23, libero23,
Quote (libero23) извените пожалуйста,вы меня не поняли,мне надо лого,которое посередине (logo.png),где надписи со значками брендов.... Оно сделано абсолютно точно также. Просто картинка фоном по центру. .... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
|
Добавлено (23-Фев-2012, 23:39:52)
--------------------------------------------- Каким браузером вы пользуетесь ?? В Firefox всё нормально,отображается ровно по центру...а вот в IE и Opera слева почему-то....как сделать,чтобы во всех браузерах отображалось ? Сообщение отредактировал libero23 - Четверг, 23 Фев 2012, 23:40:13
|
|
libero23, Для IE ... пропишите Doctype в Общих настройках сайта а потом и смотрите как что отображается в IE ...
|
|
Здравствуйте!
Помогите, пожалуйста, настроить шапку на сайте http://domination.ucoz.com/ Размер: 1 395px × 320px При открытии на мониторах с разрешением меньшего размера появляется полоса прокрутки, а мне хотелось бы, чтобы шапка подстраивалась под размер экрана и полосы не было. Пробовал некоторые вышеописанные способы, не помогло, возможно из-за того, что я что-то неправильно делал. Вот код "Верхняя часть сайта" Code <table border="0" cellpadding="0" cellspacing="0" width="100%" height="210" style="background:url('') "> <tr><td rowspan="3" width="100%"><img src="http://domination.ucoz.com/8238856.jpg" border="0"></td></tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="29" style="background:url('') right no-repeat;"> <tr><td style="padding-left:20px;font-size:10px;"><?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="padding-right:20px;font-size:10px;" align="right"><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></tr> </table> |
|
Здравствуйте! Помогите,пожалуйста,решить одну проблему. Я в этом новичок и уже вообще запутался в этих кодах.
При любом разрешении экрана,всё отлично. Как только 1024х768,сразу проблема. Вобщем,при сжатии окна браузера весь центральный контент сайта сжимается до определённого момента,и потом исчезает. И все бы ничего,но верхняя часть сайта никуда не пропадает,а продолжает сжиматься и все лезет друг на друга,можно ли как-то сделать,чтобы верхняя и центральная часть вместе исчезали "под окно браузера"  Сообщение отредактировал Santree - Суббота, 21 Апр 2012, 13:44:24
|
|
Santree,
Quote (Santree) сайта сжимается до определённого момента,и потом исчезает. И все бы ничего,но верхняя часть сайта никуда не пропадает,а продолжает сжиматься и все лезет друг на друга,можно ли как-то сделать,чтобы верхняя и центральная часть вместе исчезали "под окно браузера" Добавьте блоку шапке свойство min-width Code #elId{min-width:1000px;} значение выберите опытным путём или посмотрите на значение других блоков. Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
| |||