Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
10.6 + | 15.0 + |
Коротка інформація
Значення за умовчанням | fill |
---|---|
Успадковується | Ні |
Застосовується | До <img> , <video> , <object> , <input type="image"> |
Відсотковий запис | незастосовні |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Управляє співвідношенням сторін замінних елементів, таких як <img> і <video> , коли у них задана ширина або висота, а також способом масштабування. Властивість -o-object-fit може зберігати вихідні пропорції елемента або навпаки, спотворювати пропорції, на догоду дотримання розмірів.
Синтаксис
-o-object-fit: fill | contain | cover | none
Значення
- fill
- Елемент масштабується, щоб відповідати заданим розмірам, при цьому пропорції ігноруються.
- contain
- Елемент масштабується, щоб цілком вміститися в задані розміри з дотриманням пропорцій.
- cover
- Елемент збільшується або зменшується, щоб цілком заповнити задану область зі збереженням пропорцій.
- none
- Зберігаються вихідні пропорції елемента, встановлені значення ширини або висоти не впливають на вміст.
Вплив різних значень на фотографії продемонстровано на рис. 1. Був використаний наступний стиль.
img {background: #ccc; overflow: hidden; width: 200px; height: 200px; }





Приклад
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> -o-object-fit </title> <style> .dolphin img {-o-fit-object: cover; height: 400px; width: 300px background: #020509; } </style> </head> <body> <p class="dolphin"> <img src="images/dolphin.jpg" alt="Дельфін"> </p> </body> </html>