Тег -o-object-fit: опис та приклади використання
Кратка інформація
Керує співвідношенням сторін замінюваних елементів, таких як <img> та <video>, коли вони мають вказану ширину або висоту, а також способом масштабування.
Синтаксис
-o-object-fit: fill | contain | cover | none
Значення
- fill
- Елемент масштабується, щоб відповідати вказаним розмірам, при цьому пропорції ігноруються.
- contain
- Елемент масштабується, щоб повністю вміститися в вказані розміри зі збереженням пропорцій.
- cover
- Елемент збільшується або зменшується, щоб повністю заповнити вказану область зі збереженням пропорцій.
- none
- Зберігаються початкові пропорції елемента, встановлені значення ширини або висоти не впливають на вміст.
Вплив різних значень на фотографії показано на рис. 1.
Примітка: приклад коду HTML/CSS для використання властивості -o-object-fit.
img {
background: #ccc; overflow: hidden;
width: 200px; height: 200px;
}Рис. 1. Фотографії з різним значенням -o-object-fit
Приклад
HTML5CSS2.1CSS3IECrOpSaFx
<!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>