Обект - CSS-трикове | CSS алманах 2025

На object-fitдефинира имот Как елемент отговаря на височината и ширината на съдържанието му кутия. Предназначен е за изображения, видеоклипове и други вградими медийни формати във връзка със object-positionсобствеността. Използвано само по себе си, object-fitни позволява да изрязваме вградено изображение, като ни дава фин контрол върху начина, по който се мачка и разтяга в кутията.

object-fit може да се зададе с една от тези пет стойности:

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

Ето как бихме могли да зададем това свойство:

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

Тъй като второто изображение има съотношение на страните, което е различно от оригиналното изображение вляво, то ще се простира извън сферата на съдържанието му, изрязвайки горната и долната част на изображението.

Струва си да се отбележи, че по подразбиране изображението е центрирано в неговото поле за съдържание, но това може да бъде променено със object-positionсвойството.

Демонстрация

Демонстрацията по-долу показва пет примера, подробно описващи как бихме могли да искаме изображение да се смачка в поле за съдържание, което понякога е по-малко или по-голямо от първоначалната му ширина (преоразмерете браузъра за по-добра представа как това може да работи):

Вижте обекта на Pen на Robin Rendle (@robinrendle) на CodePen.

Ако съдържанието на изображението не запълва полето за съдържание по някаква причина, тогава незапълненото пространство ще покаже фона на елемента, в този случай светлосив фон.

Поддръжка на браузър

Заслужава да се отбележи, че iOS 8-9.3 и Safari 7-9.1 object-fitсобствеността, но не object-position.

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.