Aspect-ratio

CSS aspect-ratio ve width/height ile oran korumayı öğrenirsin.

Doğal boyut (intrinsic size)

Bir <img>'ye width ve height öznitelikleri yazmak, tarayıcıya görselin doğal boyutunu (intrinsic size) söyler. Bu boyutlar görsel yüklenmeden önce bilinince tarayıcı, sayfada onun için yer ayırır.

Yer ayrılmazsa görsel yüklenince içerik aşağı doğru iter ve yer değiştirme (layout shift) oluşur. Bu kayma, kullanıcı deneyimini ve CLS (Cumulative Layout Shift) puanını bozar. Yani width/height yalnızca bir boyut değil, bir performans önlemidir.

CSS aspect-ratio

aspect-ratio CSS özelliği, bir kutunun en-boy oranını sabitler. Örneğin aspect-ratio: 16 / 9 yazarsan, genişlik ne olursa olsun yükseklik 16:9 oranında kalır. Bunu <img>'ye uygulayabilirsin.

Ancak HTML'de width ve height yazmak genellikle daha iyidir: tarayıcı oranları kendiliğinden hesaplar ve görsel yüklenmeden yer açar. CSS ile aspect-ratio ise görselin boyutunu değil, yalnızca oranını korur; bu yüzden ikisini birlikte kullanmak en güvenlidir.

Uygulama Picture, source ve img(width/height) yaz

Body içine bir <picture> ekle. İçine bir <source> koy: media özniteliği (min-width: 800px), srcset özniteliği galeri-genis.jpg olsun. Sonra bir <img> ekle; src özniteliği galeri-dar.jpg, alt özniteliği Galeri, width özniteliği 800, height özniteliği 450 olsun.

Örnek çözümü göster

<body>
  <picture>
    <source media="(min-width: 800px)" srcset="galeri-genis.jpg">
    <img src="galeri-dar.jpg" alt="Galeri" width="800" height="450">
  </picture>
</body>

Kendini test et

<img> etiketinde width ve height yazmanın temel faydası nedir?
- Görseli yeniden boyutlandırmak için CSS gerekmez
- Tarayıcı yer ayrırır, sayfa yüklenirken yer değiştirme (CLS) azalır
- Görselin ALT metnini otomatik üretir
- Görselin biçimini (AVIF/WebP) belirler
Cevabı göster

Tarayıcı yer ayrırır, sayfa yüklenirken yer değiştirme (CLS) azalır — Doğru. width/height yer ayrılmasını sağlar, bu da CLS'yi azaltır.

CSS aspect-ratio yaz

<style>
  .hero {
    width: 100%;
    ____: 16 / 9;
  }
</style>

Cevabı göster

<style>
  .hero {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
</style>

Oranı kullanımıyla eşleştir

16 / 9

Sinema ekranı oranı
4 / 3

Eski TV oranı
1 / 1

Kare görsel
21 / 9

Geniş sinema oranı

Sıradaki ders: Background ve img

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler