Une image responsive est une image qui peut s'adapter à différents appareils, quelle que soit la taille de l'écran. Avoir une image responsive sur son site internet est devenu crucial de nos jours. Car cela accélère non seulement le site Web, mais offre également une expérience utilisateur intéressante sur tous les appareils. Les images réactives seront également redimensionnées en redimensionnant le navigateur.
Les images réactives s'adaptent efficacement aux différentes tailles d'écran sur différents appareils. Il garantit le maintien de la qualité. Un site Web réactif avec des images réactives augmente sûrement les taux d'engagement et de conversion. Les images peuvent être rendues réactives à l'aide de CSS ainsi que de requêtes multimédias.
Cet article utilisera HTML et CSS pour rendre les images réactives.
Comment rendre les images réactives avec HTML et CSS ?
Pour rendre les images réactives en utilisant HTML et CSS, suivez les étapes ci-dessous :
- Utilisez la propriété « max-width ».
- Utilisez la propriété « largeur ».
- Appliquez des requêtes multimédias.
Méthode 1 : utilisez la propriété « max-width »
La première méthode pour rendre une image réactive consiste à utiliser le « largeur maximale ' propriété. Le ' largeur maximale La propriété ' est utilisée pour définir la largeur maximale de l'image. Si le contenu dépasse la largeur maximale, la hauteur de l'élément sera modifiée.
Créer du HTML
Pour ajouter un fichier image dans la balise
du HTML, les utilisateurs doivent utiliser la baliseAjouter du CSS
Maintenant, créez un fichier CSS externe, enregistrez-le avec le fichier « . css ' et liez-le à l'intérieur de la balise
du fichier HTML. Pour styliser le fichier image dans le fichier CSS, commencez par la balise img et ouvrez les accolades. Ensuite, à l’intérieur de l’accolade, ajoutez le « largeur maximale : 100 % ; » pour ajuster l'image horizontalement dans le conteneur. De plus, cela empêchera les images d’être coupées. Après cela, ajoutez « hauteur : automatique ; » pour ajuster automatiquement la hauteur afin que l'image s'affiche correctement :img {
largeur maximale : 100% ;
hauteur : auto ;
}
Redimensionnez la fenêtre du navigateur pour vérifier la façon dont l'image évolue.
Méthode 2 : utilisez la propriété « width »
Une autre méthode pour rendre une image réactive consiste à utiliser la propriété « largeur ». La propriété ' largeur » définit la largeur des images et du texte. Il ne contient pas de marges, de remplissage ou de bordures. Il peut définir la taille des images et du texte sous la forme cm, px ou %. Pour rendre une image responsive, attribuez simplement le « largeur « propriété à » 100 % ». Paramètre ' largeur : 100% ; » signifie que rendre l'image aussi grande que l'élément parent :
img {largeur : 100% ;
hauteur : auto ; }
Ce qui précède confirme que l'image est réactive. Pour vérifier s'il est réactif ou non, redimensionnez simplement la fenêtre du navigateur.
Méthode 3 : appliquer des requêtes multimédias
Les requêtes multimédias CSS aident les utilisateurs à modifier l'apparence d'une page Web. La requête multimédia CSS contient des conditions, chaque fois que ces conditions sont remplies, elle modifiera l'apparence de l'appareil ou du navigateur. Les requêtes multimédias peuvent également aider les utilisateurs à rendre les images réactives. Pour cette raison, spécifiez d’abord le « @ médias ', puis précisez le ' largeur maximale ' et attribuez la largeur maximale d'une image entre les accolades. Chaque fois que cette condition est remplie, l'image devient réactive. Après cela, ajoutez les accolades, spécifiez la balise img et spécifiez le ' largeur : 100% ; » valeur:
@médias ( largeur maximale : 480px ) {img {
largeur : 100% ;
}
}
Note : l'image ne sera réactive que si elle remplit la condition spécifiée.
La requête multimédia CSS a été appliquée et l'image se comportera désormais comme réactive si elle est redimensionnée à la taille d'image spécifiée. Sinon, il ne sera pas réactif :
Conclusion
Pour rendre les images réactives avec HTML et CSS, les utilisateurs disposent de différentes méthodes. Ces méthodes incluent la création d'images réactives en utilisant « largeur maximale ' propriété, ' largeur ', et également en appliquant la requête multimédia CSS. Cet article a présenté aux utilisateurs la solution complète pour rendre les images réactives.