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ı