En Boy Oranı Kutusu Oluşturucu Modern ve eski CSS yaklaşımlarıyla yanıt veren en boy oranı kutuları oluşturun.
En Boy Oranı Kutusu Oluşturucu
Modern ve eski CSS yaklaşımlarıyla yanıt veren en boy oranı kutuları oluşturun.
Önceden ayarlanmış veya özel bir oran seçin
Yaygın yön oranlarından (16:9, 4:3, 1:1) seçim yapın veya özel değerler girin.
Kutuyu yapılandırın
Maksimum genişlik, arka plan rengi ayarlayın ve modern veya eski CSS yaklaşımı arasında seçim yapın.
CSS'yi kopyalayın
Yön oran kutusunu önizleyin ve CSS kodunu kopyalayın.
What Is En Boy Oranı Kutusu Oluşturucu?
Aspect Ratio Box Generator, belirli bir genişlik-yükseklik oranını koruyan-responsive konteynırlar oluşturur. Boyutları ne olursa olsun oranlarını korumak, videolar, resimler, kartlar ve orantılı boyutlara ihtiyaç duyan tüm öğeler için önemlidir. Bu araç, sekiz ortak ön ayar sunar: 1:1 (kare), 4:3 (standart), 16:9 (geniş ekran), 21:9 (ultra geniş), 3:2 (fotoğraf), 9:16 (portre), 2:3 (poster) ve 3:4 (tablet). Ayrıca özel oran değerleri ayarlayabilirsiniz. Araç, modern CSS aspect-ratio özelliğini ve daha широк tarayıcı desteği için miras padding-bottom tekniğini destekler. Ön izleme, maksimum genişlik ve arka plan rengi ayarlanabilen Aspect Ratio Box'u gösterir ve oluşturulan CSS, seçilen yaklaşımı içerir.
Why Use En Boy Oranı Kutusu Oluşturucu?
-
Sekiz yaygın yön oranı önceden ayarlanmış değerleri artı özel girdi
-
Hem modern (aspect-ratio) hem de eski (padding-bottom) CSS yaklaşımları
-
Maksimum genişlik ve arka plan rengi özelleştirilebilir
-
Önizleme doğru bir şekilde orantılı kutuyu gösterir
Common Use Cases
Video Konteynırları
Gömme videolar için 16:9 responsiv konteynırlar oluşturun.
Resim Yer Tutucuları
Düzeni değiştirmeyi önlemek için resimler yüklenirken yer ayırın.
Responsiv Kartlar
Farklı ekran boyutlarında kartların tutarlı oranlarını koruyun.
Fotoğraf Galerileri
Galeri ızgara düzenleri için uniform resim konteynırları oluşturun.
Technical Guide
Modern CSS aspect-ratio özelliği, tercih edilen oranını doğrudan ayarlar: aspect-ratio: 16 / 9. Tarayıcı, element genişliğine göre otomatik olarak yüksekliği hesaplar. Bu, 2021'den beri tüm modern tarayıcılarda desteklenmektedir. Miras teknik, genişlik yüzdesi olarak padding-bottom (padding yüzdeleri ebeveyn genişliğine göredir) kullanır: padding-bottom: 56.25%, 16:9 oranı oluşturur (9/16 * 100 = 56.25%). Miras yaklaşımı, konteynırda position: relative ve çocuk içeriğinde position: absolute; top: 0; left: 0; width: 100%; height: 100% gerektirir. Modern yaklaşım daha basit ve okunabilir. Her iki yöntem de oranını koruyan responsive konteynırlar oluşturur. max-width özelliği, konteynır boyutunu sınırlar. Resimler için, object-fit özelliği, resmin Aspect Ratio container'ı nasıl doldurduğunu kontrol eder.
Tips & Best Practices
-
1Daha temiz ve basit kod için modern aspect-ratio özelliğini kullanın
-
2Eski tarayıcı desteği için padding-bottom tekniğine geri dönün
-
3Yön oranı konteynırlarındaki resimlerde object-fit: cover kullanın
-
4Kutunun geniş ekranlarda çok büyük olmasına engel olmak için maksimum genişlik ayarlayın
Related Tools
CSS Flexbox Oyun Alanı
Tüm esnek konteynır özelliklerine sahip etkileşimli kontrollerle görsel CSS Flexbox keşfi.
🎨 CSS & Design
CSS Grid Oyun Alanı
Etkileşimli kontroller ile şablon sütunları, satırları ve boşlukları oluşturabileceğiniz görsel CSS Grid yapımcısı.
🎨 CSS & Design
Cevrimiçi Tasarım Testeri
Yerleşik iframe görüntüleyici ile ortak cihaz kesme noktalarında web sitelerini önizleyin.
🎨 CSS & Design
Medya Sorgu Oluşturucu
Ön tanımlı breakpoint'lerle birlikte özellik koşullarına sahip CSS medya sorgularını oluşturun.
🎨 CSS & DesignFrequently Asked Questions
Q CSS'de aspect-ratio nedir?
Q Aspect-ratio özelliği her yerde destekleniyor mu?
Q Padding-bottom hilesi nedir?
Q Yön oranı kutusunun içine içerik nasıl eklenir?
Q Resimlerle birlikte yön oranı kullanabilir miyim?
About This Tool
En Boy Oranı Kutusu Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.