CSS · справочник

Свойство aspect-ratio

aspect-ratio задаёт желаемое соотношение ширины к высоте. Браузер рассчитывает вторую сторону, если одна из них известна или зависит от контейнера.

Обложка карточки

Соотношение 16 / 9 создаёт широкую область. Изображение заполняет её через object-fit без искажения пропорций.

.card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Квадраты и видео

Для аватара подходит 1 / 1. У iframe с видео можно задать ширину 100% и стандартное соотношение, не рассчитывая высоту вручную.

.avatar { aspect-ratio: 1; border-radius: 50%; }
.video { width: 100%; aspect-ratio: 16 / 9; }

Частые ошибки

• И width, и height жёстко заданы.
• Изображение растянуто без object-fit.
• Неверное соотношение исходного видео.
• Нет размеров и страница скачет при загрузке.

Связанные темы

object-fit · picture · Видео