Что такое aspect-ratio в CSS?

Question

Accepted Answer

## Пропорции бокса

`aspect-ratio` задаёт отношение ширины к высоте бокса. Браузер сам достраивает недостающую сторону — удобно против CLS у медиа и плейсхолдеров.

```css
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.avatar {
  aspect-ratio: 1;
  width: 64px;
  object-fit: cover;
}
```

Если заданы и ширина, и высота, и ratio — поведение по правилам спецификации (конфликт разрешается с учётом размеров). Старый padding-top хак для ratio больше не нужен в современных браузерах.

## Итог

`aspect-ratio` резервирует пропорции бокса; база стабильных превью, video frame и карточек.