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

Лучший способ растянуть изображение - это использовать свойство 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;
}

Чтобы растянуть картинку на весь экран с помощью 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 для реализации такого поведения.

Если картинка — фон страницы, задайте её через background с background-size: cover:

body {
  margin: 0;
  min-height: 100vh;
  background: url("bg.jpg") center / cover no-repeat;
}

cover растягивает картинку на весь экран без искажений. То, что не помещается по краям, обрезается.

Картинка тегом img на весь экран

<img class="fullscreen" src="photo.jpg" alt="Горы на закате">

Без object-fit: cover картинка растянется под размеры окна и исказится. 100vw и 100vh — 100% ширины и высоты окна браузера.

Картинка по размеру блока

Чтобы картинка заполнила родительский блок:

.card {
  width: 300px;
  height: 200px;
}

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

Значения object-fit и background-size

Для background-size есть ещё 100% 100% — то же, что fill.

На всю ширину с сохранением пропорций

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

Высота подстроится сама. Картинка не выйдет за пределы блока на телефоне.

Если картинка не растягивается

• У body есть отступ по умолчанию 8px. Уберите его: margin: 0.
• Высота в процентах не работает, если у родителя высота не задана. Используйте 100vh или задайте высоту родителю.
• На телефонах 100vh иногда больше видимой части экрана из-за панели браузера. Помогает 100dvh.

Фоны, размеры и object-fit разбирают на курсе «Профессиональная верстка».