Сохранение соотношения сторон элемента в зависимости от высоты

Сохранение ширины элемента в процентах от его высоты может оказаться сложной задачей. Хотя использование процентного значения для отступа-верхнего может привести к противоположному эффекту, отступ-слева в процентах зависит от ширины объекта, а не от его высоты.

Чтобы решить эту проблему, CSS вводит свойство аспект-пропорции, предоставляя элегантное решение для поддержания постоянного соотношения сторон в зависимости от высоты. Следующий фрагмент кода демонстрирует его использование:

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

В этом примере элемент .box имеет плавную высоту 50 % и соотношение сторон 2:1. Когда высота контейнера изменяется, высота и ширина блока изменяются соответствующим образом, сохраняя его соотношение сторон.

Свойство аспект-пропорции гарантирует, что ширина блока остается пропорциональной его высоте, независимо от текстового содержимого или размера контейнера. . Это устраняет необходимость в сложных решениях JavaScript и обеспечивает чистый и эффективный подход, основанный только на CSS, для поддержания пропорций.