Prisitaikantys vaizdai arba reaguojantys vaizdai yra būdų, kaip įkelti tinkamus vaizdus pagal ekrano dydį arba įrenginį, derinys. Prisitaikantys vaizdai automatiškai koreguojami pagal skirtingus ekrano dydžius ir įrenginius. Prisitaikantys vaizdai reikalauja sukurti skirtingą kiekvieno įrenginio, kuriame bus pasiekiamas tinklalapis, išdėstymą. Prisitaikančius vaizdus galima lengvai sukurti naudojant CSS Flexbox. „Flexbox“ yra vienmatis CSS išdėstymo modelis, sukuriantis eilutes arba stulpelius. „Flexbox“ leidžia lengviau sukurti reaguojančią struktūrą.
Šiame įraše bus pateiktos gairės, kaip sukurti prisitaikančius vaizdus naudojant CSS Flexbox.
Kaip sukurti prisitaikančius vaizdus naudojant CSS Flexbox?
Norėdami sukurti prisitaikančius vaizdus naudodami CSS „Flexbox“, vartotojai pirmiausia turi sukurti HTML struktūrą ir tada pritaikyti CSS. Praktiniam demonstravimui atlikite toliau pateiktas procedūras.
Sukurkite HTML struktūrą
Sukurti Pirmiausia sukurkite „Flexbox“ nustatydami „ ekranas ' nuosavybės vertė į ' lankstus “ viduje “ vaizdo konteineris “ Tada vaizdams pritaikykite CSS, nurodydami „ img ' kartu su ' .images-container ' vardas. Pirmiausia nustatykite „ lankstus ' nuosavybės vertė į ' 1 “, kad laisvą vietą vaizdams paskirstytų tolygiai. Tada nustatykite „ maksimalus plotis ' nuosavybės vertė į ' 100 % “, kad vaizdai neviršytų pradinio pločio. Nustatyti ' aukščio ' nuosavybės vertė į ' automatinis “, kad išlaikytumėte formato santykį. Galiausiai pridėkite tarpus tarp vaizdų nustatydami „ marža ' nuosavybės vertė į ' 10 piks “: Prisitaikantys vaizdai naudojant CSS Flexbox buvo sėkmingai sukurti. Žemiau pateiktas išvesties vaizdas yra prieš naršyklės lango apvyniojimą: Dabar apvyniokime naršyklės langą, kad patikrintume, ar vaizdas yra prisitaikantis: Norėdami sukurti prisitaikančius vaizdus su CSS Flexbox, vartotojas pirmiausia turi sukurti HTML struktūrą, tada apibrėžti žyma.
viduje pridėkite „ src “ žymą, kad nurodytumėte vaizdo kelią ir pridėtumėte alternatyvų vaizdą naudodami „ viskas “ žyma:
< div klasė = 'vaizdų konteineris' >
< img src = 'vaizdas-1.jpg' viskas = „Pirmasis vaizdas“ >
< img src = 'vaizdas-2.jpg' viskas = 'Antras vaizdas' >
div >
Taikyti CSS
ekranas: lankstus ;
flex-wrap: įvyniojimas;
}
.images-container img {
lankstus: 1 ;
maksimalus plotis: 100 % ;
aukštis: automatinis;
paraštė: 10 pikselių;
}
Prieš apvyniojimą 
Po Wrap 
Aukščiau pateiktas vaizdas patvirtina, kad pridėti vaizdai yra prisitaikantys. Išvada
žyma. Tada pritaikykite CSS ir CSS viduje nustatykite ypatybę „display“ į „ lankstus “, kad sukurtumėte „Flexbox“. Šiame rašte parodytas išsamus prisitaikančių vaizdų kūrimo su CSS Flexbox vadovas.