⚙️ Что такое свойство aspect-ratio в CSS и как оно используется?

aspect-ratio — это свойство CSS, которое задаёт соотношение ширины к высоте элемента. Оно упрощает создание адаптивных контейнеров, таких как видео, изображения или карточки.

➡️ Пример:

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

<style>
  .box {
    width: 300px;
    aspect-ratio: 16 / 9; /* Соотношение сторон 16:9 */
    background: lightblue;
  }
</style>

🗣️ В этом примере элемент .box сохраняет соотношение сторон 16:9 независимо от ширины. Это свойство полезно для создания адаптивных сеток и медиа-контейнеров.

🖥 Подробнее тут