📖 Boyutlandırma
aspect-ratio (En-Boy Oranı Kilitleme)
Görsellerin veya video taşıyıcılarının genişliğine göre yüksekliğini sabit bir oranda (16/9, 1/1, 4/3) otomatik kilitler.
⚡ Sözdizimi (Syntax)
aspect-ratio: 16 / 9;
🛠️ Pratik Kullanım Örnekleri
📌 CLS (Cumulative Layout Shift) Önleyen Video Çerçevesi
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0.75rem;
overflow: hidden;
}
💡
Mühendislik İpucu & En İyi Pratik:
Resim yüklenmeden önce sayfa kaymasını önleyerek Google Core Web Vitals CLS puanını artırır.
İlgili Kılavuzlar
display: flex (Esnek Kutu Düzeni - Flexbox)
display: grid (İki Boyutlu CSS Izgara Düzeni)
position: sticky (Kaydırmaya Bağlı Sabitlenen Başlıklar)
backdrop-filter (Buzlu Cam & Glassmorphism Efekti)
clamp() (Akıcı Tipografi ve Dinamik Boyutlandırma)
:has() Ebeveyn Seçici (Parent Selector)
aspect-ratio (En-Boy Oranı Kilitleme)