Adaptívne obrázky alebo responzívne obrázky sú kombináciou metód na načítanie správnych obrázkov na základe veľkosti obrazovky alebo zariadenia. Adaptívne obrázky sa automaticky upravia podľa rôznych veľkostí obrazovky a zariadení. Adaptívne obrázky vyžadujú vytvorenie iného rozloženia pre každé zariadenie, na ktorom bude webová stránka prístupná. Adaptívne obrázky je možné jednoducho vytvárať pomocou CSS Flexbox. Flexbox je jednorozmerný model rozloženia CSS, ktorý vytvára riadky alebo stĺpce. Flexbox uľahčuje vytvorenie responzívnej štruktúry.
Tento príspevok poskytne návod na vytváranie adaptívnych obrázkov pomocou CSS Flexbox.
Ako vytvoriť adaptívne obrázky pomocou CSS Flexbox?
Na vytvorenie adaptívnych obrázkov pomocou CSS musia používatelia Flexbox najprv vytvoriť štruktúru HTML a potom použiť CSS. Pre praktickú ukážku si prečítajte nižšie uvedené postupy.
Vytvorte štruktúru HTML
Vytvor Najprv vytvorte Flexbox nastavením „ displej “hodnota nehnuteľnosti na “ flex ' vnútri ' obrázkový kontajner “ Ďalej aplikujte CSS na obrázky zadaním „ img ' spolu s ' .obrázky-kontajner ' názov. Najprv nastavte „ flex “hodnota nehnuteľnosti na “ 1 ” s cieľom rovnomerne rozložiť dostupné voľné miesto medzi obrázky. Potom nastavte „ max-šírka “hodnota nehnuteľnosti na “ 100% “, aby sa zabezpečilo, že obrázky nepresiahnu ich pôvodnú šírku. Nastaviť ' výška “hodnota nehnuteľnosti na “ auto “, aby sa zachoval pomer strán. Nakoniec pridajte medzery medzi obrázkami nastavením „ marža “hodnota nehnuteľnosti na “ 10 pixelov “: Adaptívne obrázky pomocou CSS Flexbox boli úspešne vytvorené. Nižšie uvedené zobrazenie výstupu je pred zalomením okna prehliadača: Teraz zabaľme okno prehliadača, aby sme skontrolovali, či je obrázok adaptívny: Na vytvorenie adaptívnych obrázkov pomocou CSS Flexbox musí používateľ najprv vytvoriť štruktúru HTML a potom definovať tag. Do
pridajte „ src “, aby ste určili cestu k obrázku a pridajte alternatívny obrázok pomocou „ všetko Značka ”:
< div trieda = 'obrázky-kontajner' >
< img src = 'image-1.jpg' všetko = 'Prvý obrázok' >
< img src = 'obrazok-2.jpg' všetko = 'Druhý obrázok' >
div >
Použiť CSS
zobraziť: flex ;
flex-wrap: zábal;
}
.images-container img {
flex: 1 ;
maximálna šírka: 100 % ;
výška: auto;
okraj: 10px;
}
Pred zabalením 
Po zabalení 
Vyššie uvedený obrázok potvrdzuje, že pridané obrázky sú adaptívne. Záver
tag. Potom použite CSS a vo vnútri CSS nastavte vlastnosť „display“ na „ flex “, aby ste vytvorili Flexbox. Tento zápis demonštroval komplexného sprievodcu vytváraním adaptívnych obrázkov pomocou CSS Flexbox.