Images flexibles

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 66 sur 76.

Dans la conception web adaptative (responsive web design), les images flexibles s'ajustent automatiquement pour s'adapter aux différentes tailles d'écran, garantissant ainsi un rendu optimal sur tous les appareils. Sans cette flexibilité, les images peuvent être trop grandes sur les petits écrans ou briser la mise en page.

Comment rendre les images flexibles :

1. Utiliser la propriété CSS max-width
Définir max-width: 100% garantit que les images ne dépassent jamais la largeur de leur conteneur.

img {
  max-width: 100%;
  height: auto; /* Conserve le ratio d'aspect */
}

2. Utiliser les unités de fenêtre d'affichage (Viewport Units)
Vous pouvez dimensionner les images en utilisant vw (viewport width) pour qu'elles s'adaptent à la taille de l'écran.

img {
  width: 50vw; /* L'image occupe 50 % de la largeur de la fenêtre d'affichage */
}

Défi

Facile

On vous donne un document HTML avec une image. Votre tâche consiste à rendre l'image responsive afin qu'elle s'adapte aux différentes tailles d'écran.

Écrivez une règle CSS qui cible tous les éléments ayant la classe img-max. Définissez son max-width sur 100% et son height sur auto.
Écrivez une règle CSS qui cible tous les éléments ayant la classe img-vw. Définissez son width sur 50vw et son height sur auto.

Aide-mémoire

Les images flexibles s'ajustent automatiquement pour s'adapter aux différentes tailles d'écran dans la conception Web réactive.

Utilisation de max-width :

img {
  max-width: 100%;
  height: auto; /* Conserve le ratio d'aspect */
}

Utilisation des unités de fenêtre d'affichage (viewport) :

img {
  width: 50vw; /* L'image occupe 50 % de la largeur de la fenêtre d'affichage */
}

Essayez vous-même

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>