⚙️ Что такое свойство aspect-ratio в CSS и зачем оно используется?
Свойство aspect-ratio задаёт соотношение сторон элемента, удерживая пропорции при изменении размеров.
Больше не нужно рассчитывать высоту через отступы или JavaScript — теперь это делается нативно
➡️ Пример:
<div class="card"></div>
<style>
.card {
width: 300px;
aspect-ratio: 16 / 9;
background: #007bff;
border-radius: 8px;
}
</style>
🗣 В этом примере элемент всегда сохраняет пропорции 16:9, независимо от ширины контейнера.
Частые применения:
• видео, изображения и превью с фиксированным соотношением сторон
• карточки, аватары и responsive UI
• создание адаптивных сеток без "резиновых" искажений
CodeBase | Frontend | #CSS
219 ·