Comment rendre une image responsive en CSS ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-02-20 12:33:11
Thèmes : image - css - html5 - bootstrap
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.