1 2 3

Вы здесь

Drupal 7 - Как растянуть картинку на весь экран CSS HTML

Аватар пользователя Gorecmagic

0 Комментарии

Как растянуть картинку на весь экран

Решил заморочится по поводу позиционирования картинок, как растянуть изображение на всю ширину экрана, как задать оригинальный размер, как обозначить позиционирование в блоке, и еще что-то для себя и для вас сегодня напишу здесь. Не то что-бы я не знаю, но постоянно забываю. И каждый раз приходится рыскать по всем местам по новой. Готовы?  Ready Go! 

Как растянут картинку на весь экран CSS HTML ?

Самый простой способ растянуть широкую картинку на весь экран такой, задайте ширину картинке в свойствах  = 100%.
Вот рабочий пример страницы с результатом: 
http://gorecmagic.ru/user_files/music/take-five.html

 

А здесь посмотрите как прописаны ширина и высота и сделайте так же, ссылка на рабочий CSS файл страницы: 
http://gorecmagic.ru/user_files/music/sandbox.css

Дальше буду расказывать о позиционировании относительно размеров, но судя по статистике посещений, никто дальше не читает  =))

 

 

 

Заполнение как растянуть картинку на всю ширину экрана?  Обратите внимание на код обведенный красным маркером, это означает, что вы растягиваете картинку на всю ширину экрана не зависимо от ее размеров. Учтите, что если вы не указали высоту блока то картинка по высоте и ширине покажется полностью.Но если у блока задана определенная высота, то картинка обрежется по высоте блока если ей не хватет места относительно пропорций вашего экрана.

То-есть по ширине картинка будет показываться везде 100%, а высота картинки будет варьироваться от от ширины экрана если размер у блока задан, и покажется полностью если высота блока не задана. Позиционирование картинки в этом примере левый верхний угол. Если хотите увеличить картинку, "Откройте в новой вкладке". Название блока может быть любым, не обязательно "боди". Здесь важно учесть один момент, что позиционирование для разных экранов будет разное.

Позиционорование по центру сверху в место "left top" ставим "center top". Тестируйте сами, если я начну объяснять, то вы ничего не пойиете, смыс такой, что как бы вы не поставили картинку, она будет менять свое положение относительно ширины экрана. Вывод, если вы хотите точное позиционирование картинки на экране , прописываем стили для каждой ширины экрана. Это уже другая история. =) Блин, хотел коротко и по делу, да не выходит. Продолжаем.

Примеры: К слову сказано, Разрешение экрана iPad и iPad 2 одинаковое и равно: 1024 на 768, но разрешение окна браузера немного другое это 1024 на 620. Давайте посмотрим примеры. Имеем картинку размером 1500 на 1000, давайте посмотрим как она будет смотрется на ширине     1) - 1920    и    2) -  1024    при высоте блока 620px. и позиционировании "left top".

1) Ширина 1920px
 
2) Ширина 1024px
 

 

Как видите результаты разнятся, давайте посмотрим, что будет если мы увеличим высоту блока с 620px до 900px.


1) Ширина экрана - 1920px, высота блока 900px;

2) Ширина экрана 1024px высота блока 900px, пришлось уменьшить картинку до полной высоты, изображеная ширина и есть полная ширина на 1024px.
 

Простое решение я вижу такое, подгоняем средний размер для всех экранов, и ставим позиционирование "center top", это значит по ширине картинка встает по середине экрана, и будет прилеплена к самому верху блока. Все, что не влезет в маленьки экран обрежется справа и с лева. Если экран шире картинки, то картинка по ширине будет показана вся, а высота будет обрезана относительно ширины экрана при указанной высоте блока и покажется полностью без указания высоты блока.

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

0 Комментарии