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

Question

Accepted Answer

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

body{
  /* задаёт путь до файла */
  background-image: url("path_to_my_image.jpg");
  /* задает стартовое положение изображения на странице */
  background-position: center center;
  /* определяет размер изображения на странице */
  background-size: cover;
  /* свойство устанавливает, будет ли повторяться изображение и каким образом */
  background-repeat: no-repeat;
  /* cвойство определяет, будет ли фоновое изображение прокручиваться 
  вместе с остальной частью страницы или будет фиксированным */
  background-attachment: fixed;

  /* возможна также и короткая запись данных свойств */
  // background: url("path_to_my_image.jpg") center center no-repeat  fixed;
  // background-size: cover;
}

Answer

Чтобы растянуть картинку на весь экран с помощью CSS, вы можете использовать следующий код:

img {
   width: 100%;
   height: 100%;
}

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

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

html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

img {
   width: 100%;
   height: 100%;
}

Этот код устанавливает ширину и высоту html и body равными 100%, а также убирает верхний и левый отступы (margin), чтобы картинка занимала все доступное пространство.

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

html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Этот код устанавливает атрибут object-fit равным cover, что означает, что картинка будет обрезана, чтобы полностью заполнить доступное пространство, но при этом оставаться пропорциональной.

Нужно понимать, что этот код работает только в современных браузерах, поддерживающих атрибут object-fit. Если вы хотите, чтобы ваш код работал во всех браузерах, вы можете использовать JavaScript для реализации такого поведения.

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

Похожие вопросы