Как сделать чтобы картинка подстраивалась под высоту экрана?

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

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

<div id="container"></div>

#container {
  width: 100%;
  height: 100vh; /* 100 процентов высоты viewport */
}

Далее, поместим внутрь контейнера нашу картинку. Мы можем использовать тег <img> для этого, или задать фоновое изображение с помощью CSS. Это зависит от ваших потребностей и предпочтений.

Вариант с <img>:

<div id="container">
  <img src="path/to/your/image.jpg" alt="Картинка" />
</div>

#container img {
  width: 100%;
  height: auto;
  object-fit: cover; /* эта опция позволит подгонять картинку под размеры контейнера */
}

Вариант с фоновым изображением:

<div id="container">
</div>

#container {
  background-image: url('path/to/your/image.jpg');
  background-size: cover; /* эта опция позволит подгонять картинку под размеры контейнера */
  background-repeat: no-repeat;
  background-position: center;
}

Обратите внимание, что в обоих вариантах мы используем object-fit: cover или background-size: cover. Это позволяет масштабировать картинку так, чтобы она заполнила всю доступную площадь контейнера сохраняя при этом свое соотношение сторон.

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