Comment rendre une image responsive en CSS ?
Réponses rédigées par Antoine
Dernière mise à jour : 2021-02-20 12:33:11
Question
Comment faire pour rendre une image responsive en CSS, de telle manière qu'elle s'adapte automatiquement à la taille de l'écran ?
Réponse
Pour qu'une image HTML soit responsive, et adapte ses dimensions à son conteneur, de manière automatique, vous devez utiliser les propriétés CSS width
et height
.
<style>
.image_responsive {
width: 100%;
height: auto;
}
</style>
<img src="image.jpg" alt="" class="image_responsive" width="400" height="200">
Remarque : Si vous souhaitez que l'image soit responsive, mais ne dépasse pas sa taille d'origine, utilisez max-width: 100%
à la place de width: 100%
.
Remarque : Si vous utilisez un framework HTML, tel que Bootstrap par exemple, il existe des CLASS CSS prédéfinies pour rendre une image responsive. Il s'agit, pour Bootstrap, de la CLASS img-fluid
.