ЦСС Водич за одзивне слике: Како учинити слике одзивним помоћу ЦСС-а

Већина данашњих веб локација реагује. А ако је потребно да центрирате и поравнате слику на тој веб локацији, мораћете да научите како да слике учините флуидним или да одговарају ЦСС-у.

Објавио сам видео са упутством који објашњава како направити прилагодљиви веб сајт корак по корак пре пар недеља. У видеу смо направили слику која реагује. Али у овом посту бих желео да дам мало више детаља о томе како да слике реагују.

Такође ћете научити неке од општих проблема који могу настати када покушавате да слике реагују - а ја ћу покушати да објасним како да их решите.

Како учинити слике прилагодљивим помоћу ЦСС-а

Да ли треба да користим релативне или апсолутне јединице?

Направити флуидну слику или реаговати на њу заправо је прилично једноставно. Када слику отпремите на своју веб локацију, она има подразумевану ширину и висину. Можете их обоје променити помоћу ЦСС-а.

Да бисте слику учинили одзивном, морате да додате нову вредност својству ширине. Тада ће се висина слике аутоматски прилагодити.

Важно је знати да увек требате користити релативне јединице за својство видтх као проценат, а не апсолутне као пикселе.

img { width: 500px; }

На пример, ако дефинишете фиксну ширину од 500 пиксела, ваша слика неће реаговати - јер је јединица апсолутна.

img { width: 50%; }

Зато бисте уместо тога требали доделити релативну јединицу попут 50%. Овај приступ учинит ће ваше слике флуидним и моћи ће сами да мијењају величину без обзира на величину екрана.

Да ли треба да користим медијске упите?

Једно од питања која ми највише постављају је да ли бисте требали користити медијске упите или не.

Упит за медије је још једна важна карактеристика ЦСС-а која помаже да веб страница реагује. Нећу овде улазити у додатне детаље, али касније можете прочитати мој други пост да бисте научили како детаљније да користите медијске упите.

Одговор на то питање је: „зависи“. Ако желите да ваша слика има различите величине од једног уређаја до другог, тада ћете морати да користите медијске упите. У супротном нећете.

Сада за овај пример, ваша слика има 50% ширине за било коју врсту екрана. Али када желите да га направите у пуној величини за мобилне уређаје, треба вам помоћ из медијских упита:

@media only screen and (max-width: 480px) { img { width: 100%; } }

Дакле, на основу правила за медијске упите, било који уређај мањи од 480 пиксела заузеће пуну величину ширине екрана.

У наставку можете погледати и видео верзију овог поста:

Зашто својство мак-видтх није сјајно?

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

Прво што треба разумети пре него што наставимо са примером је шта тачно ради својство мак-видтх.

Својство мак-видтх поставља максималну ширину за елемент, што не дозвољава да ширина тог елемента буде већа од његове вредности мак-видтх (али може бити и мања).

На пример, ако слика има подразумевану ширину од 500 пиксела, а ако величина екрана има само 360 пиксела, нећете моћи да видите комплетну слику јер нема довољно простора:

img { max-width: 100%; width: 500px; // assume this is the default size }

Због тога можете да дефинишете својство максималне ширине за слику и подесите је на 100%, што смањује слику од 500 пиксела на простор од 360 пиксела. Тако ћете моћи да видите комплетну слику на екрану мање величине.

Добра ствар је што, пошто користите релативну јединицу, слика ће бити флуидна у било ком уређају мањем од 500 пиксела.

Нажалост, величина екрана ће бити нешто већа од 500 пиксела, али слика неће јер има подразумевану ширину од 500 пиксела. Овај приступ ће сломити одзив слике.

Да бисте то поправили, морате поново да користите својство видтх, што својство мак-видтх чини бескорисним.

Шта је са Висинама?

Још један уобичајени проблем на који можете наићи повезан је са својством хеигхт. Обично се висина слике аутоматски сама себи мења, тако да не морате да доделите својство висине својим сликама (јер то на неки начин прекида слику).

Али у неким случајевима ћете можда морати да радите са сликама које морају имати фиксну висину. Дакле, када слици доделите фиксну висину, она ће и даље реаговати, али неће изгледати добро.

img { width: 100%; height: 300px; }

Срећом, постоји још једно својство које ЦСС нуди да реши овај проблем ...

Решење: Својство прилагођено објекту

Да бисте имали већу контролу над својим сликама, ЦСС пружа још једно својство које се назива објект-фит. Користимо својство објекта-фит и доделимо вредност која ће учинити вашу слику лепшом:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

Ако је потребно, можете да користите и својство објекта-положаја (поред објекта-уклапања) за фокусирање на одређени део слике. Многи људи нису свесни својства прилагођености објекту, али може бити корисно да се ове врсте проблема реше.

Надам се да вам је овај пост помогао да разумете и решите проблеме са одзивним сликама. Ако желите да сазнате више о веб развоју, слободно погледајте мој Иоутубе канал.

Хвала вам за читање!