Comment – Images réactives
Apprenez à créer une image responsive avec CSS.
Les images réactives s'ajusteront automatiquement pour s'adapter à la taille de l'écran.
Redimensionnez la fenêtre du navigateur pour voir l'effet réactif :
Comment créer des images réactives
Étape 1) Ajoutez du HTML :
Exemple
<img src="nature.jpg" alt="Nature" class="responsive">
Étape 2) Ajoutez CSS :
Si vous souhaitez que l'image soit mise à l'échelle vers le haut et vers le bas en fonction de la réactivité, définissez la width
propriété CSS sur 100 % et height
sur auto :
Exemple
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%
:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width
property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.