Употреба CSS object-fit и CSS background-size особина

Забележио Иван Божанић августа 2021. године
object-fit
Извор слике

Када желиш да се слике различитих величина и формата приказују у једном елементу тако да задрже своју изворну размеру, онда користиш вредности cover и contain за особине object-fit и background-size. То су уједно и вредности које су исте за обе особине и обављају исти задатак.

object-fit cover
object-fit contain

Уз вредност cover слика се опсеца и испуњава цео оквир, док се уз вредност contain приказује комплетна слика у оквиру.

Која је разлика и како се примењују object-fit и background-size особине?

Једна од разлика је начин на који ће се вршити промена извора слике током даљег уређивања сајта. У наредним примерима приказаћу ситуацију када хоћеш да припадајући елемент буде увек испуњен садржајем слике која може бити различитих формата, а да се притом не развуче или не скупи. Тада користиш cover вредност.

object-fit

Изворне слике могу бити различитог формата у односу на припадајући елемент.

Особина background-size

Ову особину можеш да примениш када одређеном елементу додељујеш позадинску слику. Извор слике се дефинише употребом вредности url('URL'), на пример:

div {
width: 1170px;
height: 530px;
background-image: url(‘honey-bee.png’);
background-size: cover;
}

Слика ће бити приказана као позадина припадајућег div елемента.

object-fit

Вредност cover jе веома корисна за приказивање позадинских слика.

Предност ове особине је та што се слика не приказује кроз img елемент, већ као позадина датог div елемента. На тај начин се смањује број HTML захтева приликом учитавања странице сајта.

Лоша страна је што се промена слике мора извршити променом вредности у CSS фајлу, па није згодно када се често мења извор слике.

Особина object-fit

За разлику од претходне особине, object-fit се односи само на слике које се налазе у img елементу. На пример, ако унутар div елемента имаш img елемент, онда особине дефинишеш овако:

div {
width: 480px;
height: 790px;
}

img {
object-fit: cover;
width: 100%;
height: 100%;
}

Предност ове особине је та да једном дефинишеш вредности у CSS фајлу, а извор слике је могуће мењати кроз корисничко окружење за администрацију сајта. Осим за слике, особина object-fit може да се користи и за видео записе и друге медијске формате.

Мана је ако страница сајта има више img елемената па је самим тим потребно више HTML захтева приликом учитавања. А то није добро за оптимизацију сајта.

object-fit

Особина object-fit је веома слична са background-size особином.

Позиционирање слике у односу на припадајући елемент

У оба случаја слика ће подразумевано бити позиционирана централно унутар оквира елемента, а то се може променити са object-position особином за object-fit, односно background-position за background-size.

object-fit

Позиционирање слике је централно у односу на оквир елемента.

Вредности могу бити кључне речи (left, right, top, bottom, center) или бројеви (у пикселима px или процентима %). Прва вредност контролише x осу, а друга y осу.

На пример:

img {
object-fit: cover;
object-position: 100% 0;
}

Позиција слике у односу на елемент ће бити лево/горе. Иста позиција се може дефинисати са вредностима object-position: left top;

Закључак

Оба начина су корисна за уводне или друге слике које треба да се приказују на различитим екранима тако да попуњавају цео оквир припадајућег елемента. Позадинске слике се примењују када желиш да избегнеш img елемент, док се други начин користи за елементе са сликом и осталим медијима попут видео записа.