Атрибут CSS object-fit
- Предыдущая страница CSS стили изображения
- Следующая страница CSS object-position
CSS object-fit Атрибут используется для указания того, как следует изменять размер <img> или <video>, чтобы адаптироваться к их контейнеру.
Поддержка браузерами
Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.
| Атрибут | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Атрибут CSS object-fit
CSS object-fit Свойство используется для указания того, как следует изменять размер <img> или <video>, чтобы соответствовать их контейнеру.
Этот атрибут указывает, как содержимое должно наполнять контейнер по-разному. Например, «сохранять пропорции» или «расширяться и занимать как можно больше места».
Смотрите на下面的 изображение тюльпанов из Шанхайского парка цветов, оно 300x300 пикселей:
Но, если мы установим上面的 изображение на 200x300 пикселей, оно будет выглядеть так:
Пример
img {
width: 200px;
height: 300px;
}
Мы видим, что изображение сжато, чтобы соответствовать контейнеру 200x300 пикселей, и его исходное соотношение сторон разрушено.
Если мы используем object-fit: cover;Это будет резать стороны изображения, поддерживать пропорции и заполнить пространство следующим образом:
Пример
img {
width: 200px;
height: 400px;
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 стили изображения
- Следующая страница CSS object-position
