Centrer une image responsive à l'écran, en HTML et CSS
Une image responsive est une image qui s'adapte automatiquement à différents appareils et tailles d'écran.
L'objectif principal de la conception responsive est d'assurer une expérience utilisateur optimale, quel que soit le dispositif utilisé pour accéder à un site web.
Lorsqu'une image est déclarée comme étant "responsive", cela signifie qu'elle est capable de se redimensionner et de s'ajuster proportionnellement à la taille de son conteneur ou de l'écran sur lequel elle est affichée.
Pour rendre une image responsive, on utilise généralement des techniques de styles (CSS) telles que max-width: 100% pour spécifier que l'image ne doit pas dépasser la largeur de son conteneur,
et height: auto pour conserver le rapport d'aspect original de l'image et éviter toute distorsion.
Ainsi, une image responsive s'adaptera automatiquement à différentes résolutions d'écran et tailles d'appareils, que ce soit sur un ordinateur de bureau, une tablette ou un téléphone portable.
Cela permet d'assurer une présentation optimale de l'image, évitant le besoin de faire défiler horizontalement ou d'avoir une image déformée ou coupée sur des écrans plus petits.
1) Exemple
Il est très facile de placer un image responsive à la gauche de l'écran; il suffit de déclarer son style .img-responsive { max-width: 100%; }, dans la partie head puis
d'écrire <img class="img-responsive " src="image.jpg"> dans la partie body de la page HTML.
Il est cependant moins évident de centrer une image responsive sur la largeur de l'écran.
Un exemple valant mieux que de long discours, voici un exemple de code pour centrer une image responsive sur la largeur de l'écran, en laissant le reste de l'écran inchangé :
exemple.zip
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
height: auto;
}
.img-responsive { max-width: 100%; }
</style>
</head>
<body>
<h1>Mon image responsive</h1>
<p>
Voici une image responsive centrée à l'écran, en laissant le reste de l'écran inchangé.
</p>
<div class="container ">
<p>
<img class="img-responsive " src="image.jpg">
</p>
</div>
</body>
</html>
2) Fonctionnement du code
Voici une explication du fonctionnement du code :
Dans la partie <style>, la classe CSS .container est utilisée pour envelopper le contenu qu'on souhaite centrer à l'écran.
• La propriété display: flex; appliquée à l'élément .container active le modèle de mise en page flexible (flexbox) pour ses enfants directs.
• Les propriétés justify-content: center; et align-items: center; centrées horizontalement et verticalement le contenu de l'élément .container respectivement.
• La propriété max-width: 100%; appliquée à l'élément .container assure que le contenu s'adapte à la largeur maximale disponible.
• La propriété height: auto; appliquée à l'élément .container permet à sa hauteur de s'ajuster automatiquement en fonction du contenu.
La classe CSS .img-responsive est appliquée à l'élément <img> pour rendre l'image responsive en ajustant sa largeur maximale à 100% de son conteneur.
En utilisant ces styles, le code centrera l'image dans l'écran en utilisant le modèle de mise en page flexible (flexbox). L'image sera également responsive et s'ajustera automatiquement à la largeur de son conteneur. Le reste du contenu sur la page restera inchangé.