Css растянуть картинку по размеру блока: HTML и CSS. Растянуть картинку на весь блок

Содержание

Изображение на всю ширину макета

Известно, что ширина окна браузера варьируется в довольно широких пределах, поэтому подгадать под нее не представляется возможным. Установить рисунок на всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина при этом четко задана, и сделать рисунок требуемого размера достаточно просто. Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой, а лишь о ширине макета, в который вписывается вся информация. Например, на сайте boeing.com применяется именно такой подход (рис. 1) и суммарная ширина изображений не превышает заданную величину.

Рис. 1. Главная страница сайта boeing.com

При «резиновом» макете, когда требуется установить изображение на всю ширину окна браузера, независимо от его размера, применяют методы, которые подробно описаны далее.

Растягивание рисунка до 100%

Первый метод состоит в том, что для тега <img> значение атрибута width устанавливается равным 100% (пример 1).

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

Пример 1. Ширина изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Картинка 100% ширины</title>
 </head>
 <body> 
  <p><img src="images/sample.gif" 
  alt="Иллюстрация"></p>
 </body>
</html>

В данном примере ширина (width) рисунка задана как 100%, а высота (height) — 100 пикселов.

Использование бесшовного фонового изображения

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

Пример такого изображения показан на рис. 2.

Рис. 2. Изображения для создания фона

Ширину рисунка достаточно сделать 20–30 пикселов.

Остерегайтесь делать слишком малую ширину подобной картинки, вроде 1–2 пикселов, поскольку это принесет только вред. Объем файла уменьшится незначительно, а браузеру потребуется достаточно времени, чтобы полностью «замостить» нужную площадь.

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

Рис. 3. Картинка для наложения на фон

Данное изображение должно выравниваться по левому краю окна браузера, поскольку правый край рисунка совмещается с фоном. Именно в этом случае и картинка и фон образуют цельное изображение.

В примере 2 приведено создание подобного блока за счет использования стилевого свойства background.

Пример 2. Фоновая картинка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   BODY {
    margin: 0; /* Убираем отступы в браузере */
   }
   #toplayer {
    background: url(images/bg.gif) repeat-x; /* Параметры фона */
    height: 69px; /* Высота слоя */
    border-bottom: 2px solid maroon; /* Параметры линии внизу */
   }
  </style>
 </head>
 <body> 
  <div>
   <img src="images/logo.gif" alt="Логотип сайта">
  </div>
 </body>
</html>

В данном примере высота блока задается с помощью свойства height, она совпадает с высотой рисунка, а его ширина по умолчанию равна auto, иными словами, занимает всю доступную ширину. Повторение фона происходит только по горизонтали, это обеспечивает значение repeat-x свойства background.

Использовать фоновый рисунок не всегда обязательно, иной раз вполне подойдет и одноцветная заливка прямоугольной области. Чтобы гармонично расположить изображение на таком фоне применяют тонирование рисунка (сепия, как это еще называется) или градиентный переход, как показано на рис. 4.

Рис. 4. Изображение с градиентом для размещения на цветном фоне

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

При использовании одноцветного фона код незначительно поменяется (пример 3). Повторять фон теперь не нужно, поэтому свойство background будет иметь только одно значение — желаемый цвет фона.

Пример 3. Цвет фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновый цвет</title>
  <style type="text/css">
   BODY {
    margin: 0; /* Убираем отступы в браузере */
   }
   #toplayer {
    background: #66a240; /* Цвет фона */
    height: 100px; /* Высота слоя */
    font-family: Verdana, sans-serif; /* Гарнитура шрифта */
    font-size: 32px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: white; /* Белый цвет текста */
   }
  </style>
 </head>
 <body> 
  <div>
  <img src="images/logo2.png" alt="Логотип сайта" align="middle">
  Выставка цветов
  </div>
 </body>
</html>

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

Рис. 5. Совмещение цвета фона и рисунка

Фоновый рисунок большой ширины

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

Большая ширина рисунка обеспечивает просмотр фактически при любом разрешении монитора, кроме, разве что, самого фантастического и редко используемого. Если такой рисунок просто добавить через тег <img>, то однозначно получим горизонтальную полосу прокрутки и расползающийся по всем швам макет страницы. Использование изображения как фона и обеспечивает отсутствие ненужной полосы прокрутки. При этом картинка будет занимать всю ширину макета, но ее часть будет скрыта от глаз пользователя, и появляться только при увеличении окна браузера. На рис. 6 показан такой фоновый рисунок. Видно, что часть изображения не помещается в окне, но оставшийся фрагмент занимает всю доступную ширину.

Рис. 6. Фоновый рисунок в окне браузера

Применяется опять же свойство background, в качестве его значения задается путь к фоновой картинке и ее параметры. Так, значение right top говорит, что правый край изображения будет фиксироваться, а при изменении ширины окна браузера станет появляться левая невидимая часть картинки. Если это значение убрать, то по умолчанию будет фиксироваться левый край (пример 4).

Пример 4. Рисунок на всю ширину страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   BODY {
    margin: 0; /* Убираем отступы в браузере */
   }
   #toplayer {
    background: url(images/popart. png) no-repeat; /* Параметры фона */
    height: 200px; /* Высота слоя */
   }
  </style>
 </head>
 <body> 
   <div></div>
 </body>
</html>

При использовании фонового рисунка следует учитывать свойственные этому методу ограничения. А именно:

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

Резюме

Способ добавления изображения на всю ширину макета веб-страницы зависит от применяемого метода верстки. Если используется макет фиксированной ширины, то общая его ширина известна заранее и рисунок по горизонтали следует ограничить этой величиной. Когда мы имеем дело с «резиновым» макетом, то в этом случае активную роль играют фоновые рисунки. Они повторяются по горизонтали таким образом, что получается слитная единая картинка.

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

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

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

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

position: fixed;. Пример: онлайн линейка.

div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

единиц vw и vh

div {
  width: 100vw;
  height: 100vh;
}

начальной 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/

object-fit — CSS: каскадные таблицы стилей

Свойство CSS object-fit задает способ изменения размера содержимого заменяемого элемента, например или , на подходит к его контейнеру.

Вы можете изменить выравнивание объекта содержимого замененного элемента в поле элемента, используя свойство object-position .

 подходит для объекта: содержит;
объект подходит: обложка;
объект-подгонка: заполнить;
соответствие объекту: нет;
объект-подгонка: уменьшение масштаба;
/* Глобальные значения */
объект-подгонка: наследовать;
соответствие объекту: начальный;
объект-подгонка: вернуться;
объект-подгонка: обратный слой;
соответствие объекту: не установлено;

Свойство object-fit задается как одно ключевое слово, выбранное из списка значений ниже.

Значения

содержат: Заменяемое содержимое масштабируется, чтобы сохранить соотношение сторон и вписаться в поле содержимого элемента. Весь объект заполняет поле, сохраняя при этом его соотношение сторон, поэтому объект будет помещен в «почтовый ящик», если его соотношение сторон не соответствует соотношению сторон поля.
крышка: Размер замененного содержимого соответствует соотношению сторон при заполнении всего поля содержимого элемента. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет обрезан по размеру.
заполнение: Размер замененного содержимого соответствует размеру поля содержимого элемента. Весь объект полностью заполнит поле. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет растянут до нужного размера.
нет: Размер замененного содержимого не изменяется.
в уменьшенном масштабе: Содержимое имеет размер, как если бы было указано нет или содержит , в зависимости от того, что приведет к меньшему размеру конкретного объекта.

Исходное значение	`заполнение`
Относится к	замененные элементы
Унаследован	NO
Вычисленное значение	Как указано
Тип анимации	Дискрет

6.      6.      6. . 
 содержат | 
 крышка | 
 нет | 
 уменьшение масштаба 
 Установка соответствия объекта для изображения 
 HTML 
 
   соответствие объекта: заливка 
  
  
   соответствует объекту: содержит 
   png" alt="Логотип MDN" />
  
   object-fit: обложка 
  
  
   соответствие объекту: нет 
  
  
   объектное соответствие: уменьшение 
  
  

 
 CSS 
 h3 {
  семейство шрифтов: Courier New, моноширинный;
  размер шрифта: 1em;
  поле: 1эм 0 0,3эм;
}
картинка {
  ширина: 150 пикселей;
  высота: 100 пикселей;
  граница: 1px сплошная #000;
  поле: 10px 0;
}
.узкий {
  ширина: 100 пикселей;
  высота: 150 пикселей;
}
.наполнять {
  объект-подгонка: заполнить;
}
.содержать {
  подходит для объекта: содержит;
}
.покрытие {
  объект подходит: обложка;
}
.никто {
  соответствие объекту: нет;
}
. уменьшать {
  объект-подгонка: уменьшение масштаба;
}
 
 Результат 
 Спецификация
 Модуль изображений CSS Уровень 3 
  # the-object-fit 
 Таблицы BCD загружаются только в браузере
 с включенным JavaScript. Включите JavaScript для просмотра данных. Другие свойства CSS, связанные с изображением:  object-position  ,  image-orientation  ,  image-rendering  ,  image-resolution  .
  размер фона 
  Последнее изменение:   27 сентября 2022 г.  , от участников MDN
 подходит для объектов | CSS-трюки - CSS-трюки 
 DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!
 Свойство  object-fit  определяет, как элемент реагирует на высоту и ширину своего поля содержимого. Он предназначен для изображений, видео и других встраиваемых мультимедийных форматов в сочетании со свойством  object-position . Используемый сам по себе,  object-fit  позволяет нам обрезать встроенное изображение, предоставляя нам детальный контроль над тем, как оно сжимается и растягивается внутри своей коробки.
  object-fit  можно установить одним из следующих пяти значений:
  fill  : это значение по умолчанию, которое растягивает изображение, чтобы оно соответствовало блоку содержимого, независимо от его соотношения сторон.
  содержат  : увеличивает или уменьшает размер изображения, чтобы заполнить поле, сохраняя соотношение сторон.
  обложка  : изображение будет заполнять всю высоту и ширину окна, снова сохраняя соотношение сторон, но часто обрезая изображение в процессе.
  нет  : изображение игнорирует высоту и ширину родителя и сохраняет исходный размер.
  уменьшение масштаба  : изображение сравнивает разницу между  нет  и  содержит , чтобы найти наименьший размер конкретного объекта.
 Вот как мы можем установить это свойство:
 img {
  высота: 120 пикселей;
}
.покрытие {
  ширина: 260 пикселей;
  объект подходит: обложка;
} 
 Поскольку второе изображение имеет соотношение сторон, отличное от исходного изображения слева, оно будет растягиваться за пределы поля своего содержимого, обрезая верхнюю и нижнюю части изображения.
 Стоит отметить, что по умолчанию изображение центрировано в поле содержимого, но это можно изменить с помощью свойства  object-position .
 Демонстрация 
 Демонстрация ниже показывает пять примеров, подробно описывающих, как мы можем захотеть сжать изображение в поле содержимого, которое иногда меньше или больше его первоначальной ширины (измените размер браузера, чтобы лучше понять, как это может работать):
 См.