Как сделать картинку во весь экран html

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

Вариант №1. Используем свойство background-image на блочном элементе, например на <div>.

Исходный HTML документ

<div class="box"></div>

Стили

.box {
  /* указываем ссылку до файла */  
  background-image: url(./test.jpg);
  /* определяем формат отображения */
  background-size: cover;
  /* если блоку не задать высоту, то контент не отобразится */
  height: 100vh;
}

Вариант №2. Используем тэг <img>.

Исходный HTML документ

<img src="./test.jpg" alt="">

Стили

img {
  /* Используем высоту и ширину окна браузера */
  width: 100vw;
  height: 100vh;
}
0 0
Познакомьтесь с основами HTML и CSS бесплатно