En Boy Oranı Kutusu

Bu araç ne işe yarar?

Aspect Ratio Box, herhangi bir en-boy oranı için hazır CSS üreten bir araçtır. Bir oran seçer ya da yazarsınız (örneğin 16:9), aracı kutunun nasıl göründüğünü canlı önizlemede gösterir ve kopyalayıp kullanabileceğiniz CSS kodunu verir. Responsive video, görsel ve kart bileşenleri tasarlayan ön yüz geliştiricileri için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

İki yöntem: modern ve geriye dönük

Araç iki ayrı CSS çözümü üretir. Modern tarayıcılar için tek satırlık aspect-ratio: 16 / 9 özelliği yeterlidir. Eski tarayıcıları desteklemeniz gerekiyorsa, padding-bottom hilesini içeren yedek kod da hazırdır: kutuya position: relative verir ve ::before sözde elemanına yüzde cinsinden bir padding-bottom uygular. Örneğin 16:9 için bu değer %56.25 olur. Her iki bloğu tek tıkla kopyalayabilirsiniz.

Hazır oranlar ve canlı önizleme

16:9, 4:3, 1:1, 21:9, 3:2 ve 9:16 gibi yaygın oranlar tek tıkla seçilebilir; istediğiniz değeri elle de yazabilirsiniz. Genişlik kaydırıcısını sürükleyerek kutunun farklı boyutlarda yüksekliğinin nasıl değiştiğini gerçek zamanlı görürsünüz. Önizleme kutusu üzerinde piksel ölçüleri de görünür, böylece tasarımınızın belirli bir genişlikte tam olarak ne kadar yer kaplayacağını önceden bilirsiniz.

Sıkça sorulan sorular

padding-bottom yüzdesi neden gerekiyor?

aspect-ratio özelliğini desteklemeyen eski tarayıcılarda dikey padding, kutunun genişliğine göre hesaplanır. Bu sayede kutu, içerik olmadan bile oranını korur. Araç bu yüzdeyi (yükseklik/genişlik × 100) sizin için hesaplar.

Dikey (portre) oranlar destekleniyor mu?

Evet. 9:16 gibi yükseklik genişlikten büyük oranları da seçebilir veya yazabilirsiniz; üretilen CSS ve önizleme buna göre güncellenir.