aspect-ratio задаёт соотношение сторон контейнера, чтобы он всегда оставался, например, 16:9 или 1:1 при изменении размеров. object-fit управляет тем, как изображение или видео вписывается в этот контейнер: растягивается, обрезается или полностью умещается внутри. В связке они дают предсказуемую адаптивную вёрстку карточек и медиаблоков без искажений и скачков макета.
aspect-ratio — это CSS-свойство, которое задаёт желаемое соотношение ширины к высоте для любого блока. Например, запись aspect-ratio: 16 / 9; говорит браузеру: при любой ширине элемента его высота должна пересчитываться так, чтобы сохранялось соотношение 16:9, а при aspect-ratio: 1 / 1; блок всегда останется квадратом.
Таким образом, aspect-ratio отвечает за форму и пропорции самого контейнера.
object-fit применяется к заменяемым элементам (чаще всего <img> и <video>) и управляет тем, как содержимое заполняет рамку, заданную шириной, высотой или тем же aspect-ratio. Режим contain полностью показывает картинку и сохраняет её пропорции, но может оставлять пустые поля по краям; cover тоже сохраняет пропорции, но заполняет весь контейнер, из-за чего лишние части изображения обрезаются; fill растягивает изображение по ширине и высоте контейнера, игнорируя исходные пропорции; none оставляет исходный размер без подгонки под контейнер; scale-down выбирает между поведением none и contain, беря меньшее по размеру.
Типичный паттерн при вёрстке карточек: контейнеру задают фиксированное соотношение сторон с помощью aspect-ratio, а вложенному изображению — object-fit: cover, чтобы превью целиком заполняло блок и могло безопасно обрезаться по краям без искажений. Ниже пример таких стилей для карточки с медиаблоком.
HTML-разметка при этом остаётся простой: контейнер оборачивает картинку, а вся «магия» адаптивного поведения происходит за счёт CSS-свойств aspect-ratio и object-fit.
В итоге aspect-ratio управляет формой контейнера, а object-fit — тем, как внутри него располагается медиаконтент; пара этих свойств значительно упрощает адаптивную вёрстку галерей, карточек и превью без искажённых изображений и «прыгающего» макета.
Отметьте свой прогресс