CSS En-Boy Oranı Hesaplayıcı

CSS En-Boy Oranı Hesaplayıcı

MCP ile bağlan →

Hesaplamaya Girin

Formül

Reklam

Sonuç

En-Boy Oranı
16 : 9
sadeleştirilmiş oran
Ondalık oran (G÷Y) 1,7778
Padding-top yöntemi (%) 56,25%

CSS En-Boy Oranı Hesaplayıcı Nedir?

Bu araç, piksel cinsinden girdiğiniz herhangi bir genişlik ve yükseklik değerini 16:9 ya da 4:3 gibi sade ve anlaşılır bir en-boy oranına dönüştürür. Ayrıca, modern CSS aspect-ratio özelliği yaygınlaşmadan önce responsive konteynerleri (videolar, iframe'ler, görsel sarmalayıcıları) sabit oranda tutmak için kullanılan klasik padding-top yüzdesini de hesaplar.

Nasıl Kullanılır?

Orijinal genişlik ve yükseklik değerlerini piksel olarak girin. Hesaplayıcı, en büyük ortak böleni (EBOB) kullanarak oranı en sade haline indirger, ondalık oranı (genişlik ÷ yükseklik) gösterir ve doğrudan CSS'inize yapıştırabileceğiniz padding-top yüzdesini verir.

Formülün Mantığı

Önce genişlik ile yüksekliğin EBOB'unu bulun. Her iki sayıyı bu EBOB değerine bölmek size sadeleştirilmiş oranı verir. Örneğin 1920 ile 1080'in EBOB'u 120'dir, dolayısıyla oran 16:9 olur. Padding-top hilesi ise yükseklik ÷ genişlik × 100 formülünü kullanır; çünkü CSS'te yüzde cinsinden padding her zaman elemanın genişliğine göre hesaplanır.

$$\text{Oran} = \frac{\text{Genişlik}}{\gcd} : \frac{\text{Yükseklik}}{\gcd}$$ $$\text{Padding} = \frac{\text{Yükseklik}}{\text{Genişlik}} \times 100\% \qquad \text{Ondalık} = \frac{\text{Genişlik}}{\text{Yükseklik}}$$
Üst dolgu yüzdesiyle duyarlı en boy oranı oluşturan kapsayıcı kutu
padding-top yüzdesi, duyarlı kutularda yüksekliği genişlikle orantılı tutar.
En boy oranını gösteren W genişliğinde ve H yüksekliğinde dikdörtgen
En boy oranı, genişlik-yükseklik ilişkisinin en büyük ortak bölene göre sadeleştirilmiş halidir.

Adım Adım Örnek

1920×1080 boyutunda bir görsel için: EBOB(1920, 1080) = 120. Oran = \(1920/120 : 1080/120 = \textbf{16:9}\). Ondalık = \(1920 \div 1080 \approx 1{,}7778\). Padding-top = \(1080 \div 1920 \times 100 = \textbf{\%56{,}25}\). Yani responsive bir sarmalayıcı için padding-top: 56.25% kullanılır.

Sıkça Sorulan Sorular

Neden aspect-ratio özelliği yerine padding-top kullanılır? Padding-top yöntemi, çok eski sürümler de dahil olmak üzere her tarayıcıda çalışır. Modern projelerde ise basitçe aspect-ratio: 16 / 9; yazmanız yeterlidir.

Yüzde hesabında genişlik mi yoksa yükseklik mi temel alınır? CSS'te dikey padding yüzdeleri her zaman kapsayıcı bloğun genişliğine göredir; formülün yükseklik ÷ genişlik olmasının nedeni de budur.

Sayılarım düzgün sadeleşmezse ne olur? Her genişlik ve yükseklik geçerli bir oran üretir; ancak bu oran 16:9 gibi bilinen bir isme denk gelmeyebilir. Böyle durumlarda ondalık oran çok işinize yarar.

Son güncelleme:

İlgili hesap makineleri

  • En-Boy Oranı Hesaplama Aracı

    En-boy oranı hesaplama aracı ile genişlik ve yüksekliği girin, görsel ve videolarınız için doğru en-boy oranını saniyeler içinde öğrenin.

  • Görsel En-Boy Oranı Hesaplama

    Herhangi bir görselin en-boy oranını bulun ve orantılı yeniden boyutlandırma ölçülerini hesaplayın. Genişlik ve yüksekliği girin, sadeleştirilmiş G:Y oranını anında görün.

  • Çift Eşlik Biti Hesaplayıcı

    İkili veri dizisi için çift eşlik bitini hesaplayın. 1'leri sayar ve toplam 1 sayısını çift yapan eşlik bitini verir.

  • Parity Bit Hesaplayıcı

    İkili verileriniz için çift ve tek parite bitini hesaplayın. 1 bitlerini sayar ve hata tespiti için gereken parite bitini gösterir.

  • Tek Eşlik Biti Hesaplayıcı

    İkili dizeler için tek eşlik bitini hesaplayın. Veri ve eşlik bitindeki toplam 1 sayısını tek yapan biti belirleyerek hata tespitine yardımcı olur.