Картинка html на весь экран – html — Как растянуть картинку на весь экран?

29.07.2019 Facebook Twitter LinkedIn Google+ Советы художника

Фоновое изображение на весь экран – CSS

Вам необходимо растянуть фоновое изображение на весь размер экрана, без отступов и белых полей. Для этого существует несколько способов как с средствами javascript так и с CSS. Приведу два примера растягивания фоновой картинки с помощью CSS.

 

Вариант первый эмулируем фоновое изображение, этот способ будет работать и в старых версиях браузеров незнающих CSS3.

Допустим HTML страница index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
  <img src="/my_background.gif" />

  <div>
    Здесь содержимое страницы
  </div>
</body>
</html>

И к нему стили css 

 html, body {
      margin: 0px;
      height: 100%;
    }
    #background {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    #body {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;

Вариант второй это свойства background-size появившийся в CSS3, ему задаются необходимые значения:

  • <величина> — ширина и высота фонового изображения в прямом виде
  • <процент> — ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента.
  • contain — изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри области фонового изображения.
  • cover — изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область фонового изображения.
  • auto — изображение имеет свой собственный размер (масштаб 100%), а если нет то масштабируется, как будто задано значение contain.

И пример реализации.

body {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

 

 


vlvit.ru

Блок на весь экран | CSS — Примеры

Ширина и высота экрана на CSS

Растянуть блок на всю ширину и высоту окна браузера можно с помощью:

  1. position: fixed;. Пример: онлайн линейка.
    div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  2. единиц vw и vh
    div {
  width: 100vw;
  height: 100vh;
}
  3. начальной width и height тега html. По умолчанию height любого тега, в том числе
    html     и body, равна его содержимому. Для того, чтобы элемент имел min-height: 100%;, должна быть указана height его родителя.
    If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]
    <html>
  <head>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      body {
        overflow: auto; 
      }
      main {
        min-height: 100%;
      }
    </style>
  </head>
  <body>
    <header></header>
    <nav></nav>
    <main></main>
    <footer></footer>
  </body>
<html>
С width проще, поскольку
width блочного элемента равно width его родителя. У body только нужно обнулить margin и padding.

Блок шириной на весь экран монитора выровнять по центру окна браузера

У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.

<html>
  <head>
    <style>
      header, nav, main, footer {
        max-width: 1200px;
        margin: 0px auto;
      }
    </style>
  </head>
  <body>
    <header></header>
    <nav></nav>
    <main></main>
    <footer></footer>
  </body>
<html>

Для того, чтобы контент выходил за пределы этих 1200px, но был ограничен шириной окна браузера, достаточно такого кода:

<html>
  <head>
    <style>
      header, nav, main, footer {
        max-width: 1200px;
        margin: 0px auto;
      }
      @media (min-width: 1200px) { 
        .full-screen {
          width: 50vw;
          margin-left: 50%;
        }
        .full-screen > div {
          width: 100vw; 
          margin-left: -100%;
        }
      }
 

    </style>
  </head>
  <body>
    <header></header>
    <nav></nav>
    <main>
      <article>
        <div>
          <div>  </div>
        </div>
      </article>
    </main>
    <footer></footer>
  </body>
<html>

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

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

Код немного доработан, опираясь на статью «Размер изображения меняется при изменении экрана браузера». Там же написан соответствующий вариант для видео.

<html>
  <head>
    <style>
      header, nav, main, footer {
        max-width: 1200px;
        margin: 0px auto;
      }
      @media (min-width: 1200px) {
        .full-screen {
          width: 50vw;
          margin-left: 50%;
        }
        .full-screen > div {
          width: 100vw;
          margin-left: -100%;
        }

  .full-screen img {
          display: block;
          max-width: 100%;
          height: auto;
          margin: 0 auto;
        }
      }
    </style>
  </head>
  <body>
    <header></header>
    <nav></nav>
    <main>
      <article>
        <div>
          <div> <img src="адрес" alt="текст" /> </div>
        </div>
      </article>
    </main>
    <footer></footer>
  </body>
<html>

И не нужны никакие лайтбокс для фото.

Другое решение: https://css-tricks.com/full-width-containers-limited-width-parents/

shpargalkablog.ru

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

Решил заморочится по поводу позиционирования картинок, как растянуть изображение на всю ширину экрана, как задать оригинальный размер, как обозначить позиционирование в блоке, и еще что-то для себя и для вас сегодня напишу здесь. Не то что-бы я не знаю, но постоянно забываю. И каждый раз приходится рыскать по всем местам по новой. Готовы?  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», это значит по ширине картинка встает по середине экрана, и будет прилеплена к самому верху блока. Все, что не влезет в маленьки экран обрежется справа и с лева. Если экран шире картинки, то картинка по ширине будет показана вся, а высота будет обрезана относительно ширины экрана при указанной высоте блока и покажется полностью без указания высоты блока.

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

gorecmagic.ru

Как растянуть фоновое изображение, чтобы заполнить веб-страницу

Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. background image HTML поможет получить тот визуальный дизайн, который вы ищете.

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

Лучший способ растянуть изображение — это использовать свойство CSS3 «background-size». Вот пример, который использует фоновое изображение для body страницы, и устанавливает размер в «100%«. Поэтому рисунок всегда растянется и заполнит весь экран.

body {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

Это свойство работает в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и во всех популярных мобильных браузерах.

Имитация растянутого фона в устаревших браузерах

Маловероятно, что понадобится обеспечивать поддержку HTML body background image браузерам старше IE9. Но предположим, что вас беспокоит, будет ли сайт корректно отображаться в IE8. В этом случае нужно имитировать растянутый фон. Можно использовать префиксы браузеров для Firefox 3.6 (-moz-background-size) и Opera 10.0 (-o-background-size).

Самый легкий способ имитировать растянутое фоновое изображение — это растянуть его по всей странице. Тогда не останется лишнего пространства, и не нужно будет волноваться, что текст не поместится в растянутую область. Вот как можно HTML background image растянуть:

  1. Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg»:
  1. Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.
    Добавьте приведенный ниже код в таблицу стилей:
img#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}
  1. Поместите все содержимое страницы внутрь элемента DIV с id «content». Добавьте DIV под изображением:
All your content here - including headers, paragraphs, etc.

Примечание: сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения – большинство браузеров не отобразят его.

  1. Задайте содержимому относительное позиционирование и задайте z-index, равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:
#content {
  position: relative;
  z-index: 1;}
  1. Свойство HTML CSS background image в Internet Explorer 6 несовместимо с современными стандартами. Есть много способов спрятать CSS от любого браузера, кроме IE6, но самое это использовать условные комментарии.
  2. Обязательно проверьте это в IE 7 и IE 8. Возможно, понадобится откорректировать комментарии.

Немногим сайтам необходимо поддерживать IE 7 или 8, а IE6 – еще меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!

Имитация растянутого фонового изображения на меньшем пространстве

Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.

  1. Разместите на странице изображение, которое будет использовано как фон.
  2. В таблице стилей установите ширину и высоту изображения. Заметьте, что можно подставить проценты, но мне легче использовать значения длины.
img#bg {
  width: 20em;
  height: 30em;}
  1. Поместите содержимое в div с id «content», как мы делали раньше.
  2. Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:
div#content {
  width: 20em;
  height: 30em;}
  1. После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.
#content {
  position: relative;
  top: -30em;
  z-index: 1;
  width: 20em;
  height: 30em;}

Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.

Перевод статьи “How to Stretch a Background Image to Fit a Web Page” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Как установить фоновую картинку на весь экран?

Сейчас вы узнаете, каким образом можно преобразовывать бекграундную картинку, чтобы ее ширина соответствовала значению ширины родительского блока или экрана монитора.

Довольно часто на сайтах в качестве фона выступает не просто какой-нибудь цвет, а именно изображение с узором или рисунком. Очень важно уметь масштабировать рисунок под размеры своего контейнера. Этот процесс можно осуществить свойством background-size, которое устанавливает размеры фона. Если для него указать одно значение, то оно будет соответствовать ширине рассматриваемого графического файла, а высота подгонится автоматически. Но в то же время можно указывать два значения, которые определять ширину и высоту. В нашем случае нужно растянуть наш фон на всю ширину, поэтому для указанного свойства задаем ширина 100%.

Пример смотрим здесь

CSS

body {
    background: url(img.jpg) no-repeat; 
	background-size:100%;
   }

Смотрим в браузер

На заметку

Советую обращать внимание на размеры фоновой картинки. Если они буду не достаточно большие, то при расширении окна качество изображения испортиться. Нужно прикидывать максимально возможный размер окна и обработать изображение в графических редакторах так, чтобы было идеальное соотношение размеров к объему картинки.

В каких браузерах работает?
9.0+3.0+9.6+3.1+3.6+2.0+2.0+

Оценок: 2 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

vaden-pro.ru

Comments
Leave Comment