Le immagini adattive o immagini reattive sono una combinazione di metodi per caricare le immagini giuste in base alle dimensioni dello schermo o al dispositivo. Le immagini adattive vengono regolate automaticamente in base alle diverse dimensioni dello schermo e ai diversi dispositivi. Le immagini adattive richiedono la creazione di un layout diverso per ciascun dispositivo su cui si accederà alla pagina web. Le immagini adattive possono essere create facilmente utilizzando CSS Flexbox. Flexbox è un modello unidimensionale di layout CSS che crea righe o colonne. Flexbox semplifica la creazione di una struttura reattiva.
Questo post fornirà indicazioni per creare immagini adattive con CSS Flexbox.
Come creare immagini adattive con CSS Flexbox?
Per creare immagini adattive utilizzando CSS Flexbox, gli utenti devono prima creare la struttura HTML e quindi applicare CSS. Per una dimostrazione pratica seguire le procedure riportate di seguito.
Crea struttura HTML
Creare un Innanzitutto, crea un Flexbox impostando ' Schermo 'valore della proprietà a' flettere ' dentro il ' contenitore di immagini ' Successivamente, applica i CSS alle immagini specificando il ' img ' insieme con il ' .contenitore-immagini ' nome. Innanzitutto, imposta ' flettere 'valore della proprietà a' 1 ' per distribuire equamente lo spazio libero disponibile tra le immagini. Quindi, imposta ' larghezza massima 'valore della proprietà a' 100% ' per garantire che le immagini non superino la larghezza originale. Impostare il ' altezza 'valore della proprietà a' auto ' per mantenere le proporzioni. Infine, aggiungi la spaziatura tra le immagini impostando ' margine 'valore della proprietà a' 10px ': Le immagini adattive utilizzando CSS Flexbox sono state create correttamente. La visualizzazione dell'output seguente è prima della chiusura della finestra del browser: Ora, chiudiamo la finestra del browser per verificare se l'immagine è adattiva: Per creare le immagini adattive con CSS Flexbox, l'utente deve prima creare la struttura HTML, quindi definire il file aggiungi il ' src ' per specificare il percorso dell'immagine e aggiungere l'immagine alternativa utilizzando il tag ' qualunque cosa ' etichetta:
< div classe = 'contenitore di immagini' >
< img src = 'immagine-1.jpg' qualunque cosa = 'Prima immagine' >
< img src = 'immagine-2.jpg' qualunque cosa = 'Seconda immagine' >
div >
Applicare i CSS
Schermo: flettere ;
flex-wrap: avvolgere;
}
.contenitore-immagini img {
flettere: 1 ;
larghezza massima: 100 % ;
altezza: automatica;
margine: 10px;
}
Prima dell'avvolgimento 
Dopo l'avvolgimento 
L'immagine sopra conferma che le immagini aggiunte sono adattive. Conclusione