Об'єкт-придатність - CSS-хитрощі

У object-fitвласності визначає , як елемент реагує на висоту і ширину його вмісту коробки. Він призначений для зображень, відео та інших вбудованих медіа-форматів разом із object-positionвластивістю. Використовуване саме по собі, object-fitдозволяє нам обрізати вбудоване зображення, даючи нам чіткий контроль над тим, як воно мляве і розтягується всередині своєї коробки.

object-fit можна встановити з одним із цих п’яти значень:

fill: це значення за замовчуванням, яке розтягує зображення відповідно до поля вмісту, незалежно від його співвідношення сторін.
contain: збільшує або зменшує розмір зображення, щоб заповнити поле, зберігаючи пропорції.
cover: зображення заповнює висоту та ширину вікна, знову зберігаючи пропорції, але часто обрізаючи зображення в процесі.
none: зображення буде ігнорувати висоту та ширину батьківського і збереже початковий розмір.
scale-down: зображення порівнює різницю між noneі containдля того, щоб знайти найменший конкретний розмір об'єкта.

Ось як ми можемо встановити цю властивість:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Оскільки друге зображення має співвідношення сторін, яке відрізняється від вихідного зображення ліворуч, воно витягнеться за межі поля вмісту, обрізаючи верхню та нижню частини зображення.

Варто зазначити, що за замовчуванням зображення знаходиться в центрі поля вмісту, але це можна змінити за допомогою object-positionвластивості.

Демо

Демо-версія демонструє п’ять прикладів, що детально описують, як ми можемо хотіти, щоб зображення стискалось у вікно вмісту, яке іноді менше або більше вихідної ширини (змініть розмір браузера, щоб краще уявити, як це може працювати):

Дивіться об’єкт «Ручка» від Робіна Рендла (@robinrendle) на CodePen.

Якщо вміст зображення з будь-якої причини не заповнює поле вмісту, тоді незаповнений простір покаже фон елемента, в даному випадку світло-сірий фон.

Підтримка браузера

Варто зазначити, що iOS 8-9.3 та Safari 7-9.1 object-fitвластивість, але ні object-position.

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.