СSS3 Объект-подгонка
Свойство CSS3 object-fit используется для указания
<img> или <video>,
которые должены быть изменены, чтобы соответствовать контейнеру.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS3 Свойство object-fit
CSS свойство object-fit используется для указания того,
как <img> или <video>
размер должен соответствовать размеру контейнера.
Это свойство указывает содержимому заполнять контейнер различными способами, например "сохранить это соотношение сторон" или "растянуть и занимают столько места, сколько можно".
Посмотрите на следующие изображения Париж, который 400x300 точек:
Тем не менее, если стиль изображения выше, чем 200x400 пикселей, он будет выглядеть следующим образом:
Мы видим, что изображение сжалось и приспособилось контейнеру 200 x 400 пикселей, а свое исходное соотношение сторон уничтожено.
Если использовать object-fit: cover; тогда, будут отрезаны стороны изображения,
сохраненных пропорций, а также заполнены пространства, как это:
Другой пример
Здесь у нас есть два изображения, и мы хотим, чтобы они заполняли ширину 50 пикселей окна браузера и 100 пикселей высоты.
В следующем примере мы не используем object-fit,
поэтому при изменении размера окна браузера соотношение сторон изображений будет уничтожены:
В следующем примере, мы используем object-fit: cover;,
поэтому, когда мы изменяем размер окна браузера, соотношение сторон изображений сохраняется:
Все значения CSS3 cвойства object-fit: cover;
Свойство 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;}
Редактор кода »
