Az adaptív vagy reszponzív képek a képernyőméret vagy az eszköz alapján megfelelő képek betöltésére szolgáló módszerek kombinációja. Az adaptív képek automatikusan a különböző képernyőméretekhez és eszközökhöz igazodnak. Az adaptív képekhez más elrendezést kell létrehozni minden olyan eszközhöz, amelyen a weboldalt elérni fogják. A CSS Flexbox segítségével könnyen hozhatók létre adaptív képek. A Flexbox egy CSS-elrendezésű egydimenziós modell, amely sorokat vagy oszlopokat hoz létre. A Flexbox megkönnyíti az érzékeny struktúra létrehozását.
Ez a bejegyzés útmutatást ad az adaptív képek CSS Flexbox segítségével történő létrehozásához.
Hogyan készítsünk adaptív képeket a CSS Flexbox segítségével?
Az adaptív képek CSS Flexbox használatával történő létrehozásához a felhasználóknak először létre kell hozniuk a HTML-struktúrát, majd alkalmazniuk kell a CSS-t. A gyakorlati bemutatóhoz kövesse az alábbi eljárásokat.
Hozzon létre HTML-struktúrát
Hozzon létre egy Először hozzon létre egy Flexboxot a „ kijelző ' ingatlan értéke ' Flex ' benne ' képtároló ” Ezután alkalmazza a CSS-t a képekre a „ img ' együtt a ' .images-container ” névvel. Először állítsa be a „ Flex ' ingatlan értéke ' 1 ” annak érdekében, hogy a rendelkezésre álló szabad területet egyenlően ossza el a képek között. Ezután állítsa be a „ max szélesség ' ingatlan értéke ' 100% ', hogy a képek ne haladják meg az eredeti szélességüket. Állítsa be a „ magasság ' ingatlan értéke ' auto ” a képarány megőrzéséhez. Végül adjon meg szóközt a képek között a „ árrés ' ingatlan értéke ' 10 képpont ”: Az adaptív képek a CSS Flexbox használatával sikeresen elkészültek. Az alábbi kimeneti nézet a böngészőablak lezárása előtt látható: Most csomagoljuk be a böngészőablakot, hogy ellenőrizzük, hogy a kép adaptív-e, nem: Az adaptív képek CSS Flexbox segítségével történő létrehozásához a felhasználónak először létre kell hoznia a HTML struktúrát, majd meg kell határoznia a címke. Az
belsejében adja hozzá a „ src ' címkével adja meg a kép elérési útját, és adja hozzá az alternatív képet a ' minden ” címke:
< div osztály = 'képtároló' >
< img src = 'kép-1.jpg' minden = 'Első kép' >
< img src = 'kép-2.jpg' minden = 'Második kép' >
div >
CSS alkalmazása
kijelző: Flex ;
flex-wrap: pakolás;
}
.images-container img {
Flex: 1 ;
maximális szélesség: 100 % ;
magasság: auto;
margó: 10 képpont;
}
Pakolás előtt 
Wrap után 
A fenti kép megerősíti, hogy a hozzáadott képek adaptívak. Következtetés
címke. Ezután alkalmazza a CSS-t, és a CSS-en belül állítsa be a „display” tulajdonságot „ Flex ” a Flexbox létrehozásához. Ez az írás bemutatta az adaptív képek CSS Flexbox segítségével történő létrehozásának átfogó útmutatóját.