Как сохранять пропорции сторон

Узнайте, как использовать CSS для сохранения пропорций высоты и ширины элементов.

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

Шаг 1 - Добавьте HTML:

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

<div class="container">
  <div class="text">Some text</div> <!-- Если вы хотите, чтобы в контейнере был текст -->
</div>

Шаг 2 - Добавьте CSS:

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

Пример - пропорции ширины и высоты 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;
}

Попробуйте сами

Другие пропорции

Пример - пропорции ширины и высоты 16:9

.container {
  padding-top: 56.25%; /* пропорции ширины и высоты 16:9 (9 делится на 16, равен 0.5625) */
}

Попробуйте сами

Пример - пропорции ширины и высоты 4:3

.container {
  padding-top: 75%; /* пропорции ширины и высоты 4:3 (3 делится на 4, равен 0.75) */
}

Попробуйте сами

Пример - пропорции ширины и высоты 3:2

.container {
  padding-top: 66.66%; /* пропорции ширины и высоты 3:2 (2 делится на 3, равен 0.6666) */
}

Попробуйте сами

Пример - пропорции ширины и высоты 8:5

.container {
  padding-top: 62.5%; /* пропорции ширины и высоты 8:5 (5 делится на 8,等于 0.625) */
}

Попробуйте сами

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

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

Пример - пропорции ширины и высоты 3:2

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

Попробуйте сами

В таблице указаны версии первых браузеров, которые полностью поддерживают этот атрибут.