Свойство CSS object-fit() — Свойства и приложения

CSS расшифровывается как каскадные таблицы стилей и определяет, как веб-страница будет выглядеть и работать на разных устройствах и в разных браузерах. В этой статье мы рассмотрим CSS-свойство object-fit().

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

Свойства объекта-подгонки ()

Свойство CSS object-fit используется для указания того, как следует изменять размер ‹img› или ‹video›, чтобы они соответствовали их контейнеру.

Это свойство указывает содержимому заполнять контейнер различными способами; например, чтобы сохранить это соотношение сторон или растянуть и занять как можно больше места».

Примеры

Это изображение sample.jpeg, которое мы будем использовать для демонстрации. Размер раздела, в который мы поместим медиа, будет 400 пикселей в высоту и 200 пикселей в ширину.