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ı

Sıradaki ders: Figure ve figcaption

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler