Adaptivní obrázky nebo responzivní obrázky jsou kombinací metod pro načtení správných obrázků na základě velikosti obrazovky nebo zařízení. Adaptivní obrazy se automaticky upraví podle různých velikostí obrazovky a zařízení. Adaptivní obrázky vyžadují vytvoření jiného rozvržení pro každé zařízení, na kterém bude webová stránka přístupná. Adaptivní obrázky lze snadno vytvářet pomocí CSS Flexbox. Flexbox je jednorozměrný model rozložení CSS, který vytváří řádky nebo sloupce. Flexbox usnadňuje vytváření responzivní struktury.
Tento příspěvek poskytne návod k vytváření adaptivních obrázků pomocí CSS Flexbox.
Jak vytvořit adaptivní obrázky pomocí CSS Flexbox?
Aby uživatelé Flexbox mohli vytvořit adaptivní obrázky pomocí CSS, musí nejprve vytvořit strukturu HTML a poté použít CSS. Pro praktickou ukázku si projděte níže uvedené postupy.
Vytvořte strukturu HTML
Vytvořit Nejprve vytvořte Flexbox nastavením „ Zobrazit “hodnota nemovitosti na “ flex ' uvnitř ' obrazový kontejner “ Dále aplikujte CSS na obrázky zadáním „ img ' spolu s ' .images-container ' název. Nejprve nastavte „ flex “hodnota nemovitosti na “ 1 “, aby se dostupné volné místo rovnoměrně rozložilo mezi snímky. Poté nastavte „ max. šířka “hodnota nemovitosti na “ 100% “, abyste zajistili, že obrázky nepřekročí svou původní šířku. Nastav ' výška “hodnota nemovitosti na “ auto ” pro zachování poměru stran. Nakonec přidejte mezery mezi obrázky nastavením „ okraj “hodnota nemovitosti na “ 10 pixelů “: Adaptivní obrázky pomocí CSS Flexbox byly úspěšně vytvořeny. Níže uvedené zobrazení výstupu je před zalomením okna prohlížeče: Nyní zalomíme okno prohlížeče a zkontrolujeme, zda je obrázek adaptivní: Chcete-li vytvořit adaptivní obrázky pomocí CSS Flexbox, musí uživatel nejprve vytvořit strukturu HTML a poté ji definovat štítek. Uvnitř
přidejte „ src ” pro určení cesty obrázku a přidání alternativního obrázku pomocí „ všechno značka ”:
< div třída = 'obrázky-kontejner' >
< img src = 'image-1.jpg' všechno = 'První obrázek' >
< img src = 'image-2.jpg' všechno = 'Druhý obrázek' >
div >
Použít CSS
Zobrazit: flex ;
flex-wrap: zavinovačka;
}
.images-container img {
flex: 1 ;
max. šířka: 100 % ;
výška: auto;
okraj: 10px;
}
Před zabalením 
Po zabalení 
Výše uvedený obrázek potvrzuje, že přidané obrázky jsou adaptivní. Závěr
štítek. Poté použijte CSS a uvnitř CSS nastavte vlastnost „display“ na „ flex ” za účelem vytvoření Flexboxu. Tento zápis demonstroval komplexního průvodce vytvářením adaptivních obrázků pomocí CSS Flexbox.