CSS aspect-ratio: сохранить пропорции изображения

Категория: CSS · Язык: CSS · Обновлено:

aspect-ratio задаёт размер области изображения, а object-fit управляет размещением самого содержимого внутри неё. Вместе они создают ровные карточки без растягивания фотографий. Проверьте результат на узком и широком экране, а также при увеличении масштаба.

Рабочий пример

CSS
.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

cover заполняет рамку и обрезает лишние края; contain показывает всё изображение и может оставить свободное место. Выберите режим по смыслу иллюстрации.

Частый вопрос

Как изменить точку кадрирования?

Добавьте object-position, например object-position: center 30%. Это сдвинет область кадра, сохранив исходные пропорции.