Object fit css что это?

object-fit определяет, как содержимое img или video помещается внутри коробки элемента. Contain показывает изображение целиком с возможными пустыми полосами, cover заполняет коробку с возможной обрезкой, fill может исказить пропорции. Для рамки width: 240px; height: 160px; выберите нужный режим. Положение обрезки меняет object-position. Если важно сохранить всю голову, начните с contain или измените пропорции рамки.

Теперь понятно, полосы с contain не ошибка.

img { width: 240px; height: 160px; object-fit: contain; } покажет фото целиком. Cover заполнит рамку, обрезав лишнее; положение изображения регулируется через object-position.

• Object-fit управляет изображением внутри коробки img, а не размерами окружающего div.
• Сначала задайте коробке определенные размеры или соотношение сторон, иначе разницу между режимами можно не увидеть.
• Contain сохраняет исходные пропорции и весь кадр. Пустое место при несовпадении форматов является ожидаемым результатом.
• Cover сохраняет пропорции и закрывает всю область, жертвуя краями кадра.
• Fill растягивает содержимое до заданной ширины и высоты, поэтому лица могут деформироваться.
• Scale-down выбирает меньший результат между естественным размером и contain, чтобы не увеличивать маленькое изображение.
• Object-position сдвигает содержимое внутри коробки. Для портрета может помочь положение ближе к верху, но оно не возвращает обрезанную область при нехватке места.
• Для фонового изображения используется background-size, а не object-fit.