Kohanduvad kujutised või reageerivad kujutised on meetodite kombinatsioon õigete kujutiste laadimiseks vastavalt ekraani suurusele või seadmele. Kohanduvaid pilte kohandatakse automaatselt vastavalt erinevatele ekraanisuurustele ja seadmetele. Kohanduvad kujutised nõuavad erineva paigutuse loomist iga seadme jaoks, millelt veebilehele juurde pääsete. Adaptiivseid pilte saab hõlpsasti luua CSS Flexboxi abil. Flexbox on CSS-i paigutusega ühemõõtmeline mudel, mis loob kas ridu või veerge. Flexbox muudab tundliku struktuuri loomise lihtsamaks.
See postitus annab juhiseid adaptiivsete piltide loomiseks CSS Flexboxiga.
Kuidas luua adaptiivseid pilte CSS Flexboxiga?
Adaptiivsete piltide loomiseks CSS Flexboxi kasutajad peavad esmalt looma HTML-i struktuuri ja seejärel rakendama CSS-i. Praktilise tutvustamise jaoks tehke allpool toodud protseduurid.
Looge HTML-struktuur
Loo Esiteks looge Flexbox, määrates ' kuva ' vara väärtus väärtusele ' painduv ' sees ' pildikonteiner ” Järgmisena rakendage piltidele CSS-i, määrates ' img ' koos ' .images-container ” nimi. Esmalt määrake ' painduv ' vara väärtus väärtusele ' 1 ” et jaotada saadaolev vaba ruum piltide vahel võrdselt. Seejärel määrake ' maksimaalne laius ' vara väärtus väärtusele ' 100% ” tagamaks, et kujutised ei ületaks nende algset laiust. Määra ' kõrgus ' vara väärtus väärtusele ' auto kuvasuhte säilitamiseks. Lõpuks lisage piltide vahele vahe, määrates ' marginaal ' vara väärtus väärtusele ' 10 pikslit ”: Adaptiivsed pildid CSS Flexboxi abil on edukalt loodud. Allolev väljundvaade on enne brauseriakna lõppu: Mähkime nüüd brauseriakna, et kontrollida, kas pilt on kohanduv: Adaptiivsete piltide loomiseks CSS Flexboxiga peab kasutaja esmalt looma HTML-i struktuuri ja seejärel määratlema tag. Lisage
sisse ' src märgend, et määrata pildi tee ja lisada alternatiivne pilt, kasutades ' kõike ” silt:
< div klass = 'pildikonteiner' >
< img src = 'pilt-1.jpg' kõike = 'Esimene pilt' >
< img src = 'pilt-2.jpg' kõike = 'Teine pilt' >
div >
Rakenda CSS
kuva: painduv ;
flex-wrap: mähis;
}
.images-container img {
paindumine: 1 ;
maksimaalne laius: 100 % ;
kõrgus: auto;
veeris: 10 pikslit;
}
Enne mähkimist 
Pärast mähkimist 
Ülaltoodud pilt kinnitab, et lisatud pildid on kohanduvad. Järeldus
tag. Seejärel rakendage CSS-i ja määrake CSS-i sees atribuudi 'kuva' väärtuseks ' painduv Flexboxi loomiseks. See kirjutis on näidanud põhjalikku juhendit adaptiivsete piltide loomiseks CSS Flexboxiga.