Соотношение сторон

Здесь вы узнаете, как сделать нужное соотношение сторон элемента при помощи CSS.

Соотношение сторон

Создание гибкого элемента, который сохраняет соотношение сторон (4:3, 16:9 и т. д.) при изменении размера:

Что такое соотношение сторон?

Соотношение сторон элемента описывает пропорциональное отношение между его шириной и высотой. Самыми распространенными соотношениями сторон являются 4:3 (универсальный видеоформат 20-го века) и 16:9 (универсальный формат для видео в высоком разрешении).

Как сделать высоту равную ширине

Шаг 1) Добавляем HTML:

Используем контейнерный элемент, например, <div>, и, если нужно добавить в него текст, добавляем дочерний элемент:

<div class="container">
   <!-- Если нужно добавить текст в контейнер -->
  <div class="text">Какой-то текст</div>
</div>

Шаг 2) Добавляем CSS:

Задаем процентное значение для свойства padding-top, чтобы определить соотношение сторон элемента DIV. В следующем примере определяется соотношение 1:1 (высота всегда равна ширине):

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* Соотношение сторон 1:1 */
  position: relative; /* Если нужно поместить текст внутри контейнера */
}

/* Если нужно поместить текст внутри контейнера */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Другие соотношения сторон:

.container {
  padding-top: 56.25%; /* Соотношение 16:9 (делим 9 на 16 = 0.5625) */
}

.container {
  padding-top: 75%; /* Соотношение 4:3 (делим 3 на 4 = 0.75) */
}

.container {
  padding-top: 66.66%; /* Соотношение 3:2 (делим 2 на 3 = 0.6666)  */
}

.container {
  padding-top: 62.5%; /* Соотношение 8:5 (делим 5 на 8 = 0.625) */
}

CSS свойство aspect-ratio

В новых браузерах для определения соотношения сторон можно использовать CSS свойство aspect-ratio:

.container {
  aspect-ratio: 3 / 2;
}