Prilagodljive slike ili responzivne slike kombinacija su metoda za učitavanje pravih slika na temelju veličine zaslona ili uređaja. Prilagodljive slike automatski se prilagođavaju prema različitim veličinama zaslona i uređajima. Prilagodljive slike zahtijevaju stvaranje drugačijeg izgleda za svaki uređaj na kojem će se pristupati web stranici. Prilagodljive slike mogu se jednostavno izraditi pomoću CSS Flexboxa. Flexbox je jednodimenzionalni model CSS izgleda koji stvara retke ili stupce. Flexbox olakšava stvaranje responzivne strukture.
Ovaj post će pružiti smjernice za stvaranje prilagodljivih slika s CSS Flexboxom.
Kako stvoriti prilagodljive slike pomoću CSS Flexboxa?
Kako bi stvorili prilagodljive slike koristeći CSS Flexbox korisnici prvo trebaju stvoriti HTML strukturu, a zatim primijeniti CSS. Za praktičnu demonstraciju prođite dolje navedene postupke.
Stvorite HTML strukturu
Stvoriti Prvo stvorite Flexbox postavljanjem ' prikaz ' vrijednost svojstva za ' savijati ' unutar ' slika-spremnik ” Zatim primijenite CSS na slike navodeći ' img ' zajedno sa ' .slike-kontejner ' Ime. Prvo postavite ' savijati ' vrijednost svojstva za ' 1 ” kako biste ravnomjerno rasporedili raspoloživi slobodni prostor među slikama. Zatim postavite ' maksimalna širina ' vrijednost svojstva za ' 100% ” kako biste osigurali da slike ne premašuju svoju izvornu širinu. Postavi ' visina ' vrijednost svojstva za ' auto ” za održavanje omjera slike. Na kraju, dodajte razmak između slika postavljanjem ' margina ' vrijednost svojstva za ' 10 px ”: Prilagodljive slike pomoću CSS Flexboxa uspješno su stvorene. Donji izlazni prikaz je prije omotača prozora preglednika: Sada zamotajmo prozor preglednika da provjerimo je li slika prilagodljiva: Za izradu prilagodljivih slika s CSS Flexboxom, korisnik najprije treba stvoriti HTML strukturu, zatim definirati označiti. Unutar
dodajte ' src ” za određivanje putanje slike i dodavanje alternativne slike pomoću sve ” oznaka:
< div razreda = 'spremnik slika' >
< img src = 'slika-1.jpg' sve = 'Prva slika' >
< img src = 'slika-2.jpg' sve = 'Druga slika' >
div >
Primijeni CSS
prikaz: savijati ;
flex-wrap: omot;
}
.spremnik slika img {
savijati: 1 ;
maksimalna širina: 100 % ;
visina: auto;
margina: 10px;
}
Prije zamotavanja 
Nakon Wrap 
Gornja slika potvrđuje da su dodane slike prilagodljive. Zaključak
označiti. Zatim primijenite CSS i unutar CSS-a postavite svojstvo 'display' na ' savijati ” kako biste stvorili Flexbox. Ovaj tekst je pokazao opsežan vodič za stvaranje prilagodljivih slika pomoću CSS Flexboxa.