Imaginile adaptive sau imaginile receptive sunt o combinație de metode pentru a încărca imaginile potrivite în funcție de dimensiunea ecranului sau de dispozitiv. Imaginile adaptive sunt ajustate automat în funcție de diferitele dimensiuni ale ecranului și dispozitive. Imaginile adaptive necesită crearea unui aspect diferit pentru fiecare dispozitiv pe care va fi accesată pagina web. Imaginile adaptive pot fi create cu ușurință folosind CSS Flexbox. Flexbox este un model unidimensional de aspect CSS care creează fie rânduri, fie coloane. Flexbox facilitează crearea unei structuri receptive.
Această postare va oferi îndrumări pentru a crea imagini adaptive cu CSS Flexbox.
Cum se creează imagini adaptive cu CSS Flexbox?
Pentru a crea imagini adaptive folosind CSS Flexbox, utilizatorii trebuie mai întâi să creeze structura HTML și apoi să aplice CSS. Pentru o demonstrație practică, parcurgeți procedurile de mai jos.
Creați o structură HTML
Creeaza o Mai întâi, creați o Flexbox setând „ afişa „valoarea proprietății la „ contracta ' în interiorul ' container-imagine ” Apoi, aplicați CSS imaginilor specificând „ img ' impreuna cu ' .imagini-container ' Nume. Mai întâi, setați „ contracta „valoarea proprietății la „ 1 ” pentru a distribui spațiul liber disponibil între imagini în mod egal. Apoi, setați „ lățimea maximă „valoarea proprietății la „ 100% ” pentru a vă asigura că imaginile nu depășesc lățimea lor inițială. Seteaza ' înălţime „valoarea proprietății la „ auto ” pentru a menține raportul de aspect. În cele din urmă, adăugați distanță între imagini setând „ marginea „valoarea proprietății la „ 10px ”: Imaginile adaptive folosind CSS Flexbox au fost create cu succes. Vizualizarea de mai jos de ieșire este înainte de închiderea ferestrei browserului: Acum, să împachetăm fereastra browserului pentru a verifica dacă imaginea este adaptivă nu este: Pentru a crea imagini adaptive cu CSS Flexbox, utilizatorul trebuie mai întâi să creeze structura HTML, apoi să definească etichetă. În interiorul
adăugați „ src ” pentru a specifica calea imaginii și pentru a adăuga imaginea alternativă folosind „ Tot ' etichetă:
< div clasă = 'container-imagini' >
< img src = „imagine-1.jpg” Tot = „Prima imagine” >
< img src = „imagine-2.jpg” Tot = „A doua imagine” >
div >
Aplicați CSS
afişa: contracta ;
flex-wrap: wrap;
}
.imagini-container img {
contracta: 1 ;
lățimea maximă: 100 % ;
inaltime: auto;
marja: 10px;
}
Înainte de Wrap 
După Wrap 
Imaginea de mai sus confirmă faptul că imaginile adăugate sunt adaptive. Concluzie
etichetă. Apoi, aplicați CSS și în interiorul CSS setați proprietatea „display” la „ contracta ” pentru a crea Flexbox. Acest articol a demonstrat ghidul cuprinzător pentru crearea de imagini adaptive cu CSS Flexbox.