Респонзивна слика је она која се може прилагодити различитим уређајима, без обзира на величину екрана. Имати прилагодљиву слику на веб локацији постало је тако пресудно у данашње време. Пошто не само да убрзава веб локацију, већ нуди и одлично корисничко искуство на свим уређајима. Реактивне слике ће такође добити промену величине променом величине претраживача.
Слике које реагују ефикасно се прилагођавају различитим величинама екрана на различитим уређајима. То осигурава да се квалитет одржава. Прилагодљива веб локација са прилагодљивим сликама сигурно повећава ангажовање и стопе конверзије. Слике се могу учинити прилагодљивим помоћу ЦСС-а заједно са медијским упитима.
Овај запис ће користити ХТМЛ и ЦСС да би слике биле прилагодљиве.
Како учинити слике прилагодљивим помоћу ХТМЛ-а и ЦСС-а?
Да бисте учинили слике прилагодљивим користећи ХТМЛ и ЦСС, прођите кроз следеће кораке:
Метод 1: Користите својство „мак-видтх”.
Први начин да слику учините прилагодљивом је коришћење „ максимална ширина ' имовина. „ максимална ширина ” својство се користи за дефинисање максималне ширине слике. У случају да садржај премашује максималну ширину, промениће висину елемента.
Креирајте ХТМЛ
Да би додали датотеку слике у ХТМЛ ознаку <боди>, корисници треба да користе ознаку <имг>. У ту сврху додајте ознаку <имг>. Унутар ознаке <имг> користите „ срц ” и доделите му путању датотеке слике заједно са екстензијом датотеке. Након тога, користите „ све ” и наведите име алтернативног фајла слике, које ће се појавити када се слика не учита:
< имг срц = 'тест-имаге.јпг' све = 'сликовне датотеке' >Додајте ЦСС
Сада креирајте спољну ЦСС датотеку и сачувајте је са „. цсс ” и повежите га унутар ознаке <хеад> ХТМЛ датотеке. Да бисте стилизирали датотеку слике у ЦСС датотеци, почните са имг ознаком и отворите витичасте заграде. Затим, унутар витичасте заграде, додајте „ максимална ширина: 100% ;” да се слика уклопи хоризонтално унутар контејнера. Штавише, спречиће сечење слика. Након тога, додајте „ висина: ауто ;” да аутоматски подесите висину, тако да се слика правилно приказује:
имг {
максимална ширина : 100% ;
висина : ауто ;
}
Промените величину прозора прегледача да бисте проверили како се слика мења.
Метод 2: Користите својство „ширина“.
Други начин да слику учините прилагодљивом је коришћење својства „ ширина ”. Имовина ' ширина ” дефинише ширину за слике и текст. Не садржи маргине, паддинг или ивице. Може подесити величину слика и текста у облику цм, пк или %. Да би слика била прилагодљива, једноставно доделите „ ширина ” својство за “ 100 %”. Подешавање ' ширина: 100% ;” значи да чини слику великом колико и родитељски елемент:
имг {ширина : 100% ;
висина : ауто ; }
Горе наведено потврђује да слика одговара. Да бисте проверили да ли реагује или не, једноставно промените величину прозора прегледача.
Метод 3: Примените медијске упите
ЦСС медијски упити помажу корисницима да измене изглед веб странице. ЦСС медијски упит садржи услове, кад год се ти услови испуне, промениће изглед уређаја или претраживача. Медијски упити такође могу помоћи корисницима да учине слике прилагодљивим. Из тог разлога, прво наведите „@ медија “, а затим наведите “ максимална ширина ” и доделите максималну ширину за слику унутар заграда. Кад год овај услов испуни, слика ће реаговати. Након тога, додајте витичасте заграде наведите имг ознаку и наведите „ ширина: 100% ;” вредност:
@медиа ( максимална ширина : 480пк ) {имг {
ширина : 100% ;
}
}
Белешка : слика ће реаговати само ако испуњава наведени услов.
ЦСС медијски упит је примењен и сада би се слика понашала као одговорна ако се промени на одређену величину слике. У супротном, неће реаговати:
Закључак
Да би слике биле прилагодљиве помоћу ХТМЛ-а и ЦСС-а, корисници имају различите методе. Ове методе укључују прилагођавање слика помоћу „ максимална ширина ' имовина, ' ширина ”, као и применом ЦСС медијског упита. Овај чланак је корисницима представио комплетно решење за прилагођавање слика.