Објект-фит - ЦСС-трикови

Anonim

У 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