Duyarlı görseller

max-width: 100% ile görsellerin duyarlı olmasını öğrenirsin.

Görsellerde max-width: 100%

Bir görseli duyarlı yapmanın en basit yolu: max-width: 100%. Bu, görselin asla kapsayıcısından geniş olmamasını sağlar; daralan ekranda otomatik küçülür.

img {
  max-width: 100%;
}

Yüzde, kapsayıcının genişliğine göredir. Görsel orijinalden büyük büyümez; sadece kapsayıcı daraldığında küçülür. width: 100% ise görseli her zaman kapsayıcı kadar büyütür; bu da kalite düşüşüne yol açabilir.

height: auto neden?

Görselin genişliği değişince orantısız ezilmemesi için height: auto eklenir. Tarayıcı, genişliğe göre en-boy oranını koruyarak yüksekliği yeniden hesaplar.

img {
  max-width: 100%;
  height: auto;
}

Bu ikisi birlikte duyarlı görselin klasik tarifidir: görsel kapsayıcıya sığar, daralan ekranda küçülür ve asla yanlış oranda uzatılmaz.

Duyarlı görsel pratiği

Modern HTML, farklı ekran boyutları için farklı görsel dosyaları sunmanı sağlar: <img srcset> ve <picture> etiketleri. Ancak CSS her durumda aynı kalkan olur:

img {
  max-width: 100%;
  height: auto;
}

Bunu sitenin tüm görselleri için bir taban olarak yazmak, kazara yatay kaydırma çıkmasını da engeller.

Uygulama img için duyarlı görsel stili

img seçicisine max-width: 100% ve height: auto bildirimlerini ekle. Görsel kapsayıcıya sığmalı ve en-boy oranı korunmalı.

Örnek çözümü göster

/* Görseli kapsayıcıya sığdır, oranı koru */
img {
  max-width: 100%;
  height: auto;
}

Kendini test et

img { max-width: 100% } ne yapar?
```
img {
  max-width: 100%;
}
```
- Görseli her zaman kapsayıcı kadar büyütür
- Görseli orijinal boyutundan küçültür
- Görseli sabit 100px genişlikte gösterir
- Görselin kapsayıcıdan geniş olmasını engeller, daralda küçültür
Cevabı göster

Görselin kapsayıcıdan geniş olmasını engeller, daralda küçültür — Doğru. max-width: 100% görseli kapsayıcıya sığar; kapsayıcı daralınca görsel de küçülür.

Duyarlı görsel bildirimini tamamla

img {
  max-width: 100%;
  ____: auto;
}

Cevabı göster

img {
  max-width: 100%;
  height: auto;
}

Görsel terimlerini eşleştir

max-width: 100%

Kapsayıcıya sığdır
height: auto

En-boy oranını koru
width: 100%

Her zaman kapsayıcı kadar
srcset

Farklı dosyalar sun

Sıradaki ders: Özet - Duyarlı kart

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler