Чтобы картинка занимала одинаковое по пропорциям место в карточках разной ширины, можно задать aspect-ratio. Это предпочтительное отношение ширины к высоте блока. В разборе Mentoring.digital отделим размер рамки от способа размещения картинки.
Задайте рамку с понятными пропорциями
.preview {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Класс preview назначается контейнеру с img внутри. Ширина зависит от родителя, а высота вычисляется из пропорции 16 к 9. У картинки заданы обе стороны по рамке, и object-fit управляет тем, как в неё помещается изображение.
При cover картинка заполняет рамку, сохраняя собственные пропорции; часть содержимого может обрезаться. Если нужно видеть всё изображение, рассмотрите contain и предусмотрите свободные области. Выбор зависит от смысла картинки.
Почему пропорция не меняет размер
Для влияния aspect-ratio хотя бы один размер блока должен быть автоматическим. Если жёстко задать одновременно width и height, предпочтительная пропорция не заменит эти два размера.
Смотрите вычисленные стили: фиксированная высота может прийти из другого правила или медиазапроса. Проверьте min-width, min-height и ограничения родителя. Одного просмотра строки aspect-ratio недостаточно.
Не смешивайте соотношение рамки с пропорциями исходного файла. Прямоугольная фотография и квадратная рамка допустимы, если разрешено кадрирование. Для схемы с важными подписями обрезка может сделать материал бесполезным.
Как проверить карточку в интерфейсе
Возьмите широкое, квадратное и вертикальное изображение. Проверьте карточки на широкой и узкой области. Важный объект должен оставаться видимым, а рамка не должна вызывать горизонтальную прокрутку страницы.
Отдельно проверьте отсутствие изображения и длинную подпись. Размер картинки не должен ломать соседний текст. ALT должен описывать смысл изображения в контексте, а не повторять технические параметры CSS.
Задание: измените рамку с 16/9 на 1/1, затем сравните cover и contain для вертикального изображения. Запишите, что готовы обрезать и почему. Адаптивные компоненты можно освоить на практическом курсе Frontend, а кадрирование обсудить с ментором по интерфейсам и фронтенду.
