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

Страница 9 из 16 « 1 2 … 7 8 9 10 11 … 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

EARL2921

Сообщений: 8

Репутация: 0

Сообщение # 121 | 13:15:15 28 Фев 2013

Miss_Esq, спасибо, работает. Только теперь появился еще один вопрос, как зафиксировать название сайта по центру, чтобы оно не съезжало?

[spoiler=А по идее вообще текст должен прятаться, при уменьшении окна браузера]

[/spoiler]Как мне этого достичь? При помощи какого кода?

Miss_Esq

Сообщений: 13859

Репутация: 4159

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

Сообщение # 122 | 14:02:50 28 Фев 2013

EARL2921, К сожалению, фиксированный и резиновый типы макета под изменение размера окна обозревателя авто-адаптироваться меньше расчётной ширины не могут ...
Только Динамично эластичный тип макета адаптируется пропорционально под любое разрешение/размер окна обозревателя ..

geometriya ISO 3166-2 DEE

Юрий2796

Сообщений: 2

Репутация: 0

Сообщение # 123 | 19:35:44 13 Мар 2013

Здравствуйте!
Я сделал приведенный ниже скрипт фоном длясайта.
Но при уменьшении масштаба вокруг фона появляются белы области.
Подскажите, пожалуйста, как сделать чтобы фон из этого
скрипта был всегда на весть экран.

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B%20background-image%20%3A%20url%28%22http%3A//www.shabbyblogs.com/storage/old/FrenchLinenW.jpg%20%22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20%20background-attachment%20%3A%20f ixed%3B%20%7D%0A%3C/style%3E%0A%3Cscript%20type%3D%22text/javascript%22%3E%0Avar%20shabby_div%20%3D%20document.createElement%28%27div%27%29%3B%0Ashabby_div.innerHTML%20%3D%20%27%3Ca%20target%3D%22_b lank%22%20href%3D%22%20http%3A//www.shabbyblogs.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//www.ShabbyBlogs.com/storage/ShabbyBlogs.jpg%22%3E%3C/a%3E%27%3B%0Adocument.getElementsByTagName%28%27body%27%29.item%280%29.appendChild%28shabby_div%29%3B%0Ashabby_div.style.cssText%20%3D%20%22 position%3A%20absolute%3B%20left%3A%200px%3B%20top%3A%2030px%3B%20z-index%3A%2050%3B%20width%3A%20150px%3B%20height%3A%2045px%3B%22%3B%0A%3C /script%3E"));</script>

Miss_Esq

Сообщений: 13859

Репутация: 4159

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

Сообщение # 124 | 21:04:55 13 Мар 2013

Юрий2796, А адрес у проблемы есть ???

geometriya ISO 3166-2 DEE

Юрий2796

Сообщений: 2

Репутация: 0

Сообщение # 125 | 12:33:34 19 Мар 2013

Цитата (Miss_Esq)

Юрий2796, А адрес у проблемы есть ???

Вот: http://yurapolina.ucoz.com/

Добавлено (19 Мар 2013, 12:33:34)
---------------------------------------------
Здравствуйте!
Я сделал приведенный ниже скрипт фоном для сайта http://yurapolina.ucoz.com/
Но при уменьшении масштаба вокруг фона появляются белы области.
Подскажите, пожалуйста, как сделать чтобы фон из этого
скрипта был всегда на весть экран.

Код

Miss_Esq

Сообщений: 13859

Репутация: 4159

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

Сообщение # 126 | 15:05:45 19 Мар 2013

Юрий2796, Переделывать нужно, боковой узор в виде цветов сделать отдельным фоном тега body, а уж середину, без цветов, сделать фоном центра ....

geometriya ISO 3166-2 DEE

SmerchCool

Сообщений: 6

Репутация: 0

Сообщение # 127 | 20:39:34 23 Мар 2013

На моем сайте пользователи могут вставлять в комментарии картинки, но картинка вместе с комментарием выходит за пределы. Что делать?

bandjuk

Сообщений: 6816

Репутация: 2398

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

Сообщение # 128 | 20:46:17 23 Мар 2013

SmerchCool, адрес страницы с примером напиши

SmerchCool

Сообщений: 6

Репутация: 0

Сообщение # 129 | 20:56:08 23 Мар 2013

http://g-cool.ru/photo/komiksy_i_prikoly/2-0-442 вот

Добавлено (23 Мар 2013, 20:56:08)
---------------------------------------------

Цитата (bandjuk)

SmerchCool, адрес страницы с примером напиши

Код

/* Вид комментарий v.2.0
------------------------------------------*/
.cell_comment_os {
  float:left;
  width:100%;
  background:#fff;
  border:1px solid #CAD1DB;
  padding-bottom:3px;
  margin-bottom:15px;
}

.comment_p {
  float:right;
  width:80px;
}

.comment_v {
  margin: 5px 0px 5px 10px;
}

.comment_c {
  overflow: hidden;
  text-align:justify;
  margin: 0px 0px 0px 10px;
  padding: 5px 0px;
  border-top: 1px solid #e7e7e7;
}

.comment_n {
  text-align:right;
  margin: 3px 78px 0px 10px;
}
.vcc_otvet {overflow:hidden!important; border: 1px solid #eccece; padding: 10px;background:#fcf6f6; }

.comment_avatar {
  width:40px;
  height:40px;
  padding: 4px;
  margin: 8px 10px 0px 15px;
  border: 1px solid #CAD1DB;
  background:#F6F6F6;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.red {color: #d20000;}
.gren {color: #FF6A00;}
.grey {color: #999;}
.text_9 {font: 9px Verdana,Arial,Helvetica, sans-serif;}
.right {float:right;}

Код css комментариев и также картинка выходит за пределами в статьях... я слышал о

Код

.eMessage img {width: 600px;}

Но не знаю куда вставлять

bandjuk

Сообщений: 6816

Репутация: 2398

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

Сообщение # 130 | 21:00:30 23 Мар 2013

SmerchCool, в ксс пропиши
.comment_c text_11 img {max-width: 180px;}
max-width: 180px; - максимально допустимая ширина картинок, вместо 180 пропиши сколько нужно

Добавлено (23 Мар 2013, 21:00:30)
---------------------------------------------
или так:
.comment_c img {max-width: 180px;}

SmerchCool

Сообщений: 6

Репутация: 0

Сообщение # 131 | 21:08:07 23 Мар 2013

Цитата (bandjuk)

SmerchCool, в ксс пропиши .comment_c text_11 img {max-width: 180px;}
max-width: 180px; - максимально допустимая ширина картинок, вместо 180 пропиши сколько нужно

Код[/color][color=#828282]/* Вид комментарий v.2.0
------------------------------------------*/
[color=#828282].comment_c text_11 img {max-width: 180px;}
max-width: 180px;

.cell_comment_os {[/color]
float:left;
width:100%;
background:#fff;
border:1px solid #CAD1DB;
padding-bottom:3px;
margin-bottom:15px;
}

.comment_p {
float:right;
width:80px;
}

.comment_v {
margin: 5px 0px 5px 10px;
}

.comment_c {
overflow: hidden;
text-align:justify;
margin: 0px 0px 0px 10px;
padding: 5px 0px;
border-top: 1px solid #e7e7e7;
}

.comment_n {
text-align:right;
margin: 3px 78px 0px 10px;
}
.vcc_otvet {overflow:hidden!important; border: 1px solid #eccece; padding: 10px;background:#fcf6f6; }

.comment_avatar {
width:40px;
height:40px;
padding: 4px;
margin: 8px 10px 0px 15px;
border: 1px solid #CAD1DB;
background:#F6F6F6;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

.red {color: #d20000;}
.gren {color: #FF6A00;}
.grey {color: #999;}
.text_9 {font: 9px Verdana,Arial,Helvetica, sans-serif;}
.right {float:right;}
Не работает, я вставил - не помогло... чтоже делать? Может не выходит из за того, что css комментов не родной от ucozа?И как исправить проблему в статьях? Я надеюсь на помощь

Добавлено (23 Мар 2013, 21:08:07)
---------------------------------------------
В смысле так

Код

/* Вид комментарий v.2.0
------------------------------------------*/
.comment_c text_11 img {max-width: 180px;}
max-width: 180px;

.cell_comment_os {
  float:left;
  width:100%;
  background:#fff;
  border:1px solid #CAD1DB;
  padding-bottom:3px;
  margin-bottom:15px;
}

.comment_p {
  float:right;
  width:80px;
}

.comment_v {
  margin: 5px 0px 5px 10px;
}

.comment_c {
  overflow: hidden;
  text-align:justify;
  margin: 0px 0px 0px 10px;
  padding: 5px 0px;
  border-top: 1px solid #e7e7e7;
}

.comment_n {
  text-align:right;
  margin: 3px 78px 0px 10px;
}
.vcc_otvet {overflow:hidden!important; border: 1px solid #eccece; padding: 10px;background:#fcf6f6; }

.comment_avatar {
  width:40px;
  height:40px;
  padding: 4px;
  margin: 8px 10px 0px 15px;
  border: 1px solid #CAD1DB;
  background:#F6F6F6;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.red {color: #d20000;}
.gren {color: #FF6A00;}
.grey {color: #999;}
.text_9 {font: 9px Verdana,Arial,Helvetica, sans-serif;}
.right {float:right;}

bandjuk

Сообщений: 6816

Репутация: 2398

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

Сообщение # 132 | 21:18:28 23 Мар 2013

SmerchCool, попробуй вставить это:
.comment_c img {max-width: 180px;}

SmerchCool

Сообщений: 6

Репутация: 0

Сообщение # 133 | 21:21:51 23 Мар 2013

Цитата (bandjuk)

SmerchCool, попробуй вставить это: .comment_c img {max-width: 180px;}

Все получилось, огромное спасибо! А что делать со статьями? Что и куда нужно вставить. что бы картинки в статьях не выходили за пределы. Заранее спасибо)