У 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
својству.
Демо
Демонстрација у наставку приказује пет примера који детаљно описују како бисмо можда желели да се слика угура у оквир са садржајем који је понекад мањи или већи од првобитне ширине (промените величину прегледача да бисте имали бољу идеју како ово може да функционише):
Погледајте Пен-објект који је уклопио Робин Рендле (@робинрендле) на ЦодеПен-у.
Ако садржај слике из било ког разлога не попуни поље за садржај, тада ће непопуњени простор приказати позадину елемента, у овом случају светло сиву позадину.
Подршка прегледача
Вреди напоменути да су иОС 8-9.3 и Сафари 7-9.1 object-fit
својство, али не object-position
.
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
Хром | Фирефок | ИЕ | Ивица | Сафари |
---|---|---|---|---|
32 | 36 | Не | 79 | 10 |
Мобиле / Таблет
Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
---|---|---|---|
88 | 85 | 4.4.3-4.4.4 | 10.0-10.2 |