Immagini flessibili

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 66 di 76.

Nel web design responsivo, le immagini flessibili si adattano automaticamente alle diverse dimensioni dello schermo, assicurando un bell’aspetto su tutti i dispositivi. Senza flessibilità, le immagini potrebbero essere troppo grandi sugli schermi piccoli o compromettere il layout.

Come rendere flessibili le immagini:

1. Usa max-width di CSS
Impostare max-width: 100% garantisce che le immagini non superino mai la larghezza del contenitore.

img {
  max-width: 100%;
  height: auto; /* Mantiene le proporzioni */
}

2. Usa le unità del viewport
Puoi dimensionare le immagini usando vw (larghezza del viewport) per farle ridimensionare in base alle dimensioni dello schermo.

img {
  width: 50vw; /* Slika zauzima 50% širine vidljivog dijela stranice */
}

Sfida

Facile

Ti viene fornito un documento HTML con un'immagine. Il tuo compito è rendere l'immagine responsive, in modo che si adatti a schermi di dimensioni diverse.

Scrivi una regola CSS che selezioni tutti gli elementi con la classe img-max. Imposta max-width su 100% e height su auto.
Scrivi una regola CSS che selezioni tutti gli elementi con la classe img-vw. Imposta width su 50vw e height su auto.

Provalo tu

<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>