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