Görsel boyutları
width ve height özniteliklerini ve yararlarını öğrenirsin.
width ve height öznitelikleri
width ve height öznitelikleri görselin piksel cinsinden boyutunu belirtir. Değer sayı olarak yazılır, birim kullanılmaz: width="640" height="360". Tarayıcı bu ölçülere göre sayfada yer açar.
Boyut bildirmek içerik kayması (layout shift) dediğimiz sorunu önler. Görsel yüklenirken altındaki metin aniden aşağı itilmez; çünkü tarayıcı yeri önceden ayırır. Kullanıcı sayfayı daha akıcı görür.
Doğal boyut (intrinsic size)
Görselin doğal boyutu (intrinsic size), dosyanın kendisindeki piksel boyutudur. width ve height yazmazsan tarayıcı görseli doğal boyutunda gösterir; ama görselin boyutunu yüklenene kadar bilemez.
HTML özniteliği olarak width ve height, görselin en boy oranını (aspect ratio) da korur. CSS ile boyutu değiştirsen bile oran bozulmaz; görsel sıkışmaz veya uzamaz.
Uygulama Boyutlu görsel ekle
Body içine bir <img> etiketi ekle. src, alt, width ve height özniteliklerinin hepsi olsun. width 640, height 360 yap.
Örnek çözümü göster
<body>
<img src="https://example.com/sehir/meydan.jpg" alt="Şehir meydanı" width="640" height="360">
</body>Kendini test et
-
width ve height yazmak neyi önler?
- İçerik kayması (layout shift) ve ani yer değişimi
- Görselin yavaş yüklenmesi
- Alternatif metnin gösterilmesi
- Sayfanın yeniden yüklenmesi
Cevabı göster
İçerik kayması (layout shift) ve ani yer değişimi — Doğru. Boyut önceden belli olduğundan tarayıcı yer açar ve içerik kaymaz.
-
width değerini tamamla
<img src="https://example.com/sehir/meydan.jpg" alt="Şehir meydanı" width="____" height="360">Cevabı göster
<img src="https://example.com/sehir/meydan.jpg" alt="Şehir meydanı" width="640" height="360"> -
Boyut kavramlarını eşleştir
- width
- Genişlik (piksel)
- height
- Yükseklik (piksel)
- intrinsic size
- Dosyanın kendi boyutu
- aspect ratio
- En boy oranı