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