Image Responsive en CSS

Vous êtes en train de créer votre site et vous demandez comment rendre une image responsive en CSS ?

Je vais vous montrer comment faire cela avec seulement 4 lignes de code CSS.

1. Image Responsive avec Boostrap

Si comme moi, vous avez l'habitude d'utiliser le framework CSS Boostrap, il suffit d'ajouter une classe CSS à vos images

Pour rendre une image responsive avec Bootstrap 3, vous devez utiliser la classe CSS "img-responsive" :

<img src="mon-image.jpg" class="img-responsive" />

Pour rendre une image responsive avec Boostrap 4, vous devez utiliser la classe CSS "img-fluid" :

<img src="mon-image.jpg" class="img-fluid" />

2. Image Responsive en CSS

Si vous n'utilisez pas Bootsrap, et que vous souhaitez rendre toutes les images de votre site en responsive, il vous suffit d'ajouter les lignes suivantes dans votre fichier CSS :

img {
    max-width: 100%;
    height: auto;
}

Ce code permet d'ajuster la largeur de l'image à 100% et d'ajuster la hauteur de l'image automatiquement.

Désormais, si vous réduisez la fenêtre de votre navigateur, l'image s'adaptera automatiquement, tout en conservant ses proportions.

Vous pouvez également créer une classe CSS indépendant que vous ajouterez ensuite à vos images.

Pär exemple, si vous souhaitez créer une classe CSS "image-responsive", il vous suffit d'ajouter les lignes suivantes dans votre fichier CSS : 

.image-responsive {
    max-width: 100%;
    height: auto;
}

Il ne vous restera plus qu'à ajouter manuellement à vos images, l'attribut class="image-responsive" :

Démonstration :

Cliquez ici pour voir une démonstration live du script Image Responsive en CSS