Css En Boy Oranı
Free online Css Aspect Ratio tool, no installation required
CSS Aspect Ratio Hakkında
Bu araç, modern `aspect-ratio` özelliğini veya klasik yüzde-dolgu (percentage-padding) hilesini kullanarak bir genişlik:yükseklik en-boy oranı için CSS üretir. Yaygın oran ön ayarları, özel genişlik/yükseklik girişleri (1-100), canlı bir önizleme kutusu ve kopyalanmaya hazır çıktı sağlar. Önizleme, işlemeyi seçilen yönteme göre uyarlar; böylece her tekniğin tam olarak ne ürettiğini görebilirsiniz.
Nasıl Kullanılır
1. Bir Common Ratio ön ayarına tıklayın (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) veya özel Genişlik ve Yükseklik girin (1-100). 2. Bir Yöntem seçin: Modern (`aspect-ratio`) veya Padding Hack. 3. Önizleme kutusu, seçilen tekniği kullanarak oranı işler. 4. Üretilen CSS'i kopyalamak için Çıktı kartındaki Copy düğmesine tıklayın.
Yöntemler ve Üretilen CSS
Modern tek satır çıktı verir: `aspect-ratio: <width> / <height>;`. Padding Hack, `position: relative; width: 100%; padding-top: <height/width*100>%;` içeren bir `.container` ve onu dolduran mutlak konumlandırılmış bir `.content` üretir; bu, `aspect-ratio` desteği olmayan ortamlar için eski tekniktir. Önizleme, maksimum 400px genişlikle sınırlandırılmış aynı stilleri kullanır; böylece görsel, CSS'in tanımladığı teknikle eşleşir.
▶Modern yerine Padding Hack'i ne zaman kullanmalıyım?
▶Genişlik ve yükseklik girişleri hangi aralığı kabul edebilir?
▶Araç CSS'in yanı sıra HTML de çıktı veriyor mu?
▶Önizleme neden iki yöntem arasında farklı görünüyor?
Bu araç size yardımcı olduysa, bana bir kahve ısmarlamayı düşünün.
Bana bir kahve ısmarla