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 пикселей:
![Париж](../images/paris.jpg)
Однако, если мы добавим изображение более 200x400 пикселей, оно будет выглядеть так:
![Париж](../images/paris.jpg)
Мы видим, что изображение сжимается, чтобы уместиться в контейнер размером 200x400 пикселей, и его исходное соотношение сторон нарушается.
Если мы используем object-fit: cover;
- это обрезает стороны изображения, сохраняя пропорции, а также заполняя пространство, как на изображении ниже:
![Париж](../images/paris.jpg)
Другой пример
Здесь у нас есть два изображения, и мы хотим, чтобы они занимали 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 внутри "собственного поля содержимого". |