CSS object-fit та object-position

Є такі відносно нові властивості CSS як object-fit та object-position. Їх не так часто можна зустріти в верстці, але є певні задачі, де вони дуже спрощують життя. Наприклад, в вас є кілька блоків з одним макетом, і ви хочете, щоб ці блоки виглядали однаково рівно. Приміром, це лістинг товарів в інтернет-магазині або список постів в блозі. При цьому в кожному блоку є картинка, яка не має однакових розмірів (так буває доволі часто).

Свойство object-fit

Властивість object-fit визначає, яким чином вміст елементів, що заміщуються, буде підігнано до країв контейнера у випадку, коли для елемента задані ширина і висота, відмінні від його власних розмірів. Про які тут елементи мова? Це можуть бути <img>, <input type=”image”>, <embed>, <iframe>, <video>, <canvas> та <object> у випадку коли вони містять вбудований вміст, а також елемент <audio>, який використовує елементи керування користувача.

В прикладі нижче картинка має розміри 800px на 500px. Ми розмістили її всередині блоку з розмірами 290px на 290px. Задавши картинці розміри 100% ширини та висоти контейнера і object-fit: cover ми змусили заповнити весь простір контейнера. При цьому за межі блока контент не виходить.

See the Pen scrollbar css by molodezky (@molodezky) on CodePen.

Також ми можемо задати й інши значення – fill, contain, scale-down

Свойство object-position

Властивість object-position використовується в поєднанні з object-fit і задає положення всередині контейнера. Значення за замовчуванням 50% 50%.