CSS Свойство object-fit
CSS свойство object-fit используется, чтобы указать, как <img> или <video> нужно изменить размер, чтобы соответствовать его контейнеру.
Object-fit - в пер. с анг. - подгонка объекта.
Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS свойство object-fit
CSS свойство object-fit используется, чтобы указать, как <img> или <video> должны быть изменены, чтобы соответствовать его контейнеру.
Это свойство указывает содержимому заполнять контейнер различными способами; такие как "сохранить это соотношение сторон" или "растянуть и занять как можно больше места".
Посмотрите на следующее изображение из Парижа, размером 400x300 пикселей:
Однако, если мы добавим изображение более 200x400 пикселей, оно будет выглядеть так:
Мы видим, что изображение сжимается, чтобы уместиться в контейнер размером 200x400 пикселей, и его исходное соотношение сторон нарушается.
Если мы используем object-fit: cover; - это обрезает стороны изображения, сохраняя пропорции, а также заполняя пространство, как на изображении ниже:
Другой пример
Здесь у нас есть два изображения, и мы хотим, чтобы они занимали 50% ширины окна браузера и 100% высоты.
В следующем примере мы НЕ используем object-fit, поэтому при изменении размера окна браузера соотношение сторон изображений будет нарушено:
В следующем примере мы используем object-fit: cover;, поэтому при изменении размера окна браузера соотношение сторон изображений сохраняется:
Все значения CSS свойства object-fit
Свойство object-fit может иметь следующие значения:
fill- Это по умолчанию. Размер заменяемого содержимого заполнен в поле содержимого элемента. При необходимости объект будет растянут или сдавлен, чтобы соответствоватьcontain- Замененное содержимое масштабируется, чтобы сохранить его пропорции, в то же время вписываясь в поле содержимого элементаcover- Размер заменяемого содержимого соответствует его пропорциям при заполнении всего поля содержимого элемента. Объект будет обрезан, чтобы соответствоватьnone- Замененный контент не изменяетсяscale-down- Размер содержимого определяется так, как если бы он не был указан или содержался (что привело бы к уменьшению размера конкретного объекта)
В следующем примере демонстрируются все возможные значения свойства object-fit:
Пример
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Попробуйте сами »
CSS Object-* Свойства
В следующей таблице перечислены CSS свойства object-* :
| Свойство | Описание |
|---|---|
| object-fit | Определяет, как <img> или <video> должен быть изменен, чтобы соответствовать его контейнеру |
| object-posititon | Определяет, как <img> или <video> должен располагаться с координатами x/y внутри "собственного поля содержимого". |
