Images flexibles

Fait partie de la section Style avec 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 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 la fenêtre d’affichage
Vous pouvez dimensionner les images à l’aide de vw (largeur de la fenêtre d’affichage) afin 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.

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>