Comment créer : image responsive

Apprenez à créer des images responsive en utilisant CSS.

L'image responsive s'ajustera automatiquement pour s'adapter à la taille de l'écran.

Ajustez la taille de la fenêtre du navigateur pour voir l'effet responsive :

Lumières

Voir l'effet

Comment créer une image responsive

Première étape - Ajouter du HTML :

<img src="nature.jpg" alt="Nature" class="responsive">

Deuxième étape - Ajouter du CSS :

Si vous souhaitez que l'image responsive puisse être à la fois agrandie et réduite, configurez le CSS width la propriété est réglée à 100%,height réglé à auto:

Exemple

.responsive {
  width: 100%;
  height: auto;
}

essayez-vous

Si vous souhaitez que l'image diminue lorsque cela est nécessaire, mais ne jamais l'agrandir au-delà de sa taille originale, utilisez max-width: 100%:

Exemple

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

essayez-vous

Si vous souhaitez limiter l'image responsive à une taille maximale, utilisez max-width les propriétés et les valeurs en pixels que vous avez choisies :

Exemple

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

essayez-vous

pages associées

Tutoriel :Image CSS

Tutoriel :Conception de site web réactif CSS