Esnek Görseller

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 66 / 76.

Duyarlı web tasarımında, esnek görseller farklı ekran boyutlarına uyacak şekilde otomatik olarak ayarlanır ve tüm cihazlarda iyi görünmelerini sağlar. Esneklik olmadan, görseller küçük ekranlarda çok büyük olabilir veya düzeni bozabilir.

Görseller Nasıl Esnek Hale Getirilir:

1. CSS max-width kullanın
max-width: 100% ayarlamak, görsellerin kapsayıcı genişliğini asla aşmamasını sağlar.

img {
  max-width: 100%;
  height: auto; /* En boy oranını korur */
}

2.Görünüm Alanı Birimlerini Kullanın
Görüntüleri, ekran boyutuyla birlikte ölçeklenmelerini sağlamak için vw (görünüm alanı genişliği) kullanarak boyutlandırabilirsiniz.

img {
  width: 50vw; /* Görsel, görünüm alanı genişliğinin %50'sini kaplar */
}

Görev

Kolay

Size bir görsel içeren bir HTML belgesi veriliyor. Göreviniz, görseli farklı ekran boyutlarına uyum sağlayacak şekilde duyarlı (responsive) hale getirmektir.

img-max sınıfına sahip tüm öğeleri hedefleyen bir CSS kuralı yazın. max-width değerini 100% ve height değerini auto olarak ayarlayın.
img-vw sınıfına sahip tüm öğeleri hedefleyen bir CSS kuralı yazın. width değerini 50vw ve height değerini auto olarak ayarlayın.

Kendin dene

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