Prilagodljive slike ali odzivne slike so kombinacija metod za nalaganje pravih slik glede na velikost zaslona ali napravo. Prilagodljive slike se samodejno prilagodijo glede na različne velikosti zaslona in naprave. Prilagodljive slike zahtevajo ustvarjanje drugačne postavitve za vsako napravo, na kateri bo spletna stran dostopana. Prilagodljive slike je mogoče preprosto ustvariti s pomočjo CSS Flexbox. Flexbox je enodimenzionalni model postavitve CSS, ki ustvarja vrstice ali stolpce. Flexbox olajša ustvarjanje odzivne strukture.
Ta objava bo zagotovila navodila za ustvarjanje prilagodljivih slik s CSS Flexbox.
Kako ustvariti prilagodljive slike s CSS Flexbox?
Če želite ustvariti prilagodljive slike z uporabo CSS Flexbox, morajo uporabniki najprej ustvariti strukturo HTML in nato uporabiti CSS. Za praktično predstavitev pojdite skozi spodaj navedene postopke.
Ustvari strukturo HTML
Ustvariti Najprej ustvarite Flexbox tako, da nastavite » zaslon » vrednost lastnosti za « flex ' znotraj ' slikovni vsebnik ” Nato uporabite CSS za slike tako, da določite » img « skupaj z » .images-container ” ime. Najprej nastavite » flex » vrednost lastnosti za « 1 ”, da enakomerno porazdelite prosti prostor med slike. Nato nastavite » največja širina » vrednost lastnosti za « 100 % «, da zagotovite, da slike ne presežejo svoje prvotne širine. Nastavite ' višina » vrednost lastnosti za « avto ”, da ohranite razmerje stranic. Na koncu dodajte razmik med slikami tako, da nastavite » marža » vrednost lastnosti za « 10 slikovnih pik ”: Prilagodljive slike z uporabo CSS Flexbox so bile uspešno ustvarjene. Spodnji izhodni pogled je pred prelomom okna brskalnika: Zdaj pa zavijmo okno brskalnika, da preverimo, ali je slika prilagodljiva: Za ustvarjanje prilagodljivih slik s CSS Flexbox mora uporabnik najprej ustvariti strukturo HTML, nato pa definirati oznaka. Znotraj
dodajte » src , da določite pot slike in dodate alternativno sliko z uporabo vse ' oznaka:
< div razred = 'vsebnik slik' >
< img src = 'slika-1.jpg' vse = 'Prva slika' >
< img src = 'slika-2.jpg' vse = 'Druga slika' >
div >
Uporabi CSS
zaslon: flex ;
flex-wrap: ovoj;
}
.images-container img {
upogib: 1 ;
največja širina: 100 % ;
višina: avto;
rob: 10px;
}
Pred zavijanjem 
Po ovitku 
Zgornja slika potrjuje, da so dodane slike prilagodljive. Zaključek
oznaka. Nato uporabite CSS in znotraj CSS nastavite lastnost »display« na » flex ”, da ustvarite Flexbox. Ta zapis je pokazal izčrpen vodnik za ustvarjanje prilagodljivih slik s CSS Flexbox.