Elastyczne obrazy

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 66 z 76.

W responsywnym projektowaniu stron internetowych elastyczne obrazy automatycznie dostosowują się do różnych rozmiarów ekranu, dzięki czemu dobrze wyglądają na wszystkich urządzeniach. Bez elastyczności obrazy mogą być zbyt duże na małych ekranach lub zaburzać układ strony.

Jak sprawić, by obrazy były elastyczne:

1. Użyj CSS max-width
Ustawienie max-width: 100% gwarantuje, że obrazy nigdy nie przekroczą szerokości swojego kontenera.

img {
  max-width: 100%;
  height: auto; /* Zachowuje proporcje obrazu */
}

2. Używaj jednostek widoku
Możesz określać rozmiar obrazów za pomocą vw (szerokość widoku), aby skalowały się wraz z rozmiarem ekranu.

img {
  width: 50vw; /* Obraz zajmuje 50% szerokości obszaru wyświetlania */
}

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z obrazem. Twoim zadaniem jest sprawić, aby obraz był responsywny i dostosowywał się do różnych rozmiarów ekranu.

Napisz regułę CSS, która wybiera wszystkie elementy z klasą img-max. Ustaw jego max-width na 100%, a jego height na auto.
Napisz regułę CSS, która wybiera wszystkie elementy z klasą img-vw. Ustaw jego width na 50vw, a jego height na auto.

Spróbuj swoich sił

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