Esnek Görseller

Coddy'nin HTML Journey'sinin Styling with CSS 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% ayarı, görüntülerin asla kapsayıcı genişliklerini aşmamasını sağlar.

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

2. Viewport Birimlerini Kullanın
Görsellerin ekran boyutuyla birlikte ölçeklenmesini sağlamak için vw (viewport width) kullanarak görselleri 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.

Kopya kağıdı

Esnek görseller, duyarlı web tasarımında farklı ekran boyutlarına uyacak şekilde otomatik olarak ayarlanır.

max-width kullanımı:

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

Görünüm alanı (viewport) birimlerini kullanma:

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

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>