Görsellerin, kartların veya video kutularının genişliği değiştikçe yüksekliğinin matematiksel orantısını (16/9, 1/1, 4/3) sabit tutan CSS özelliğidir.
\n\nNasıl Çalışır ve Temel Prensipleri Nelerdir?
\naspect-ratio: 16 / 9; kuralı ile tarayıcı içeriğin yüksekliğini genişliğe göre anında otomatik hesaplar.
\n\nNeden Kritik Öneme Sahiptir?
\nGörseller yüklenirken sayfanın aniden aşağı kaymasını (Cumulative Layout Shift - CLS) sıfıra indirir; video pencerelerinin bozulmasını önler.
\n\nEn İyi Uygulama ve Kullanım İpuçları
\nResponsive kart görsellerinde ve video iFrame kaplarında sabit yükseklik yerine aspect-ratio kullanın.
\n\nSık Yapılan Hatalar ve Kaçınılması Gerekenler
\naspect-ratio kuralı varken sabit 'height: 300px' yazarak orantıyı ezmek.
Sıkça Sorulan Sorular (SSS)
Aspect Ratio Nedir? (CSS En-Boy Oranı Koruması) hakkında en sık yöneltilen sorular ve mühendislik ekibimizin uzman yanıtları:
Görsel henüz inmeden önce kaplayacağı alanı tam olarak rezerve ederek sayfanın zıplamasını engeller.
Padding-top yüzde hileleri (padding-top: 56.25%) ile çözülürdü; artık tek satırla çözülmektedir.