Les images adaptatives ou images réactives sont une combinaison de méthodes permettant de charger les bonnes images en fonction de la taille de l'écran ou de l'appareil. Les images adaptatives sont automatiquement ajustées en fonction des différentes tailles d'écran et des différents appareils. Les images adaptatives nécessitent la création d'une mise en page différente pour chaque appareil sur lequel la page Web sera accessible. Des images adaptatives peuvent être facilement créées à l’aide de CSS Flexbox. Flexbox est un modèle unidimensionnel de mise en page CSS qui crée des lignes ou des colonnes. Flexbox facilite la création d'une structure réactive.
Cet article fournira des conseils pour créer des images adaptatives avec CSS Flexbox.
Comment créer des images adaptatives avec CSS Flexbox ?
Afin de créer des images adaptatives à l'aide de CSS Flexbox, les utilisateurs doivent d'abord créer la structure HTML, puis appliquer CSS. Pour une démonstration pratique, suivez les procédures fournies ci-dessous.
Créer une structure HTML
Créer un Tout d’abord, créez une Flexbox en définissant le « afficher « valeur de la propriété à » fléchir ' à l'intérieur de ' conteneur d'images » Ensuite, appliquez CSS aux images en spécifiant le « img ' avec le ' .images-conteneur ' nom. Tout d’abord, définissez le « fléchir « valeur de la propriété à » 1 ' afin de répartir équitablement l'espace libre disponible entre les images. Ensuite, définissez le « largeur maximale « valeur de la propriété à » 100% ' pour garantir que les images ne dépassent pas leur largeur d'origine. Met le ' hauteur « valeur de la propriété à » auto » pour conserver le rapport hauteur/largeur. Enfin, ajoutez un espacement entre les images en définissant le ' marge « valeur de la propriété à » 10px » : Les images adaptatives utilisant CSS Flexbox ont été créées avec succès. La vue de sortie ci-dessous se trouve avant la fin de la fenêtre du navigateur : Maintenant, enveloppons la fenêtre du navigateur pour vérifier si l'image est adaptative : Pour créer les images adaptatives avec CSS Flexbox, l'utilisateur doit d'abord créer la structure HTML, puis définir le étiqueter. À l’intérieur du
, ajoutez le « src ' pour spécifier le chemin de l'image et ajouter l'image alternative à l'aide de la balise ' tout ' étiqueter:
< div classe = 'conteneur d'images' >
< img src = 'image-1.jpg' tout = 'Première image' >
< img src = 'image-2.jpg' tout = 'Deuxième image' >
div >
Appliquer CSS
afficher: fléchir ;
flex-wrap : envelopper ;
}
img {
fléchir: 1 ;
largeur maximale: 100 % ;
hauteur : automatique ;
marge : 10px ;
}
Avant l'emballage 
Après l'emballage 
L'image ci-dessus confirme que les images ajoutées sont adaptatives. Conclusion
étiqueter. Ensuite, appliquez le CSS et, à l’intérieur du CSS, définissez la propriété « display » sur « fléchir » afin de créer Flexbox. Cet article a démontré le guide complet pour créer des images adaptatives avec CSS Flexbox.