Nasıl kullanılır?
- Boyutu değiştirmek için oranı girin (örneğin 16 ve 9) ya da yaygın oranlardan birini seçin, ardından genişlik veya yükseklik değerini yazın. Diğer değer hesaplanır.
- Oranı bulmak için bir görselin, ekranın veya videonun genişliğini ve yüksekliğini girin.
- Önizlemeyi kontrol edin ve web düzeninde kullanmanız gerekiyorsa CSS aspect-ratio kuralını kopyalayın.
Nasıl çalışır?
Orantılı yeniden boyutlandırmada yükseklik = genişlik × oran yüksekliği ÷ oran genişliği (tersi de geçerlidir). Piksel boyutları genellikle tam sayı olduğundan sonuç yuvarlanabilir; 1000 genişlikte 16:9 gibi oranlar tam bölünmediğinde, yuvarlanmış yükseklik (563) tam eşleşme değil, yakın bir tahmindir.
Bir boyut, her iki taraf da en büyük ortak bölenine bölünerek sadeleştirilir: 1920 ve 1080'in ortak böleni 120 olduğundan sonuç 16:9 olur. Bazı gerçek boyutlar bilinen bir orana sadeleştirilemez. 1366×768 tam olarak 683:384'tür ve 16:9'a çok yakındır; bu nedenle araç, %2'den daha yakın olduğunda en yakın yaygın oranı da gösterir. Benzer şekilde, “21:9” monitörler aslında 64:27 (2560×1080) veya 43:18'dir (3440×1440); 21:9, pazarlama amaçlı kullanılan bir addır.
CSS'te aspect-ratio: 16 / 9, genişliği değişirken bir öğenin şeklini korumasını sağlar. Bu, video yerleştirmeleri ve yüklenirken sayfa düzeninin kaymaması gereken görsel yer tutucuları için kullanışlıdır.
Örnekler
Video küçük resmi boyutu
1280 piksel genişliğinde olması gereken 16:9 bir küçük resmin yüksekliği 720 piksel olmalıdır.
Ekranın en-boy oranını belirleme
2560×1600, 8:5 oranına sadeleşir; bu da dizüstü bilgisayarlarda yaygın olan 16:10 ile aynıdır.
Sosyal medya için dikey kırpma
4:5 oranında ve 1080 genişlikte yükseklik 1350 olur; bu, birçok akışın kabul ettiği dikey bir boyuttur.
Sık sorulan sorular
16:9 ile 1,78:1 aynı mı?
Evet. 16 ÷ 9 ≈ 1,778 olduğundan ikisi de aynı şekli ifade eder. Sinema formatları genellikle 2,39:1 gibi ondalık sayılarla belirtilir.
Sonuç neden ondalıklı?
Her genişlik, oranı tam olarak bölmeyebilir. Piksel boyutları için yuvarlamayı açın; sonuç en yakın tam piksele yuvarlanır ve tam orandan küçük bir miktar sapabilir.
CSS aspect-ratio özelliği her yerde çalışır mı?
Güncel ve yaygın tarayıcıların tümünde desteklenir. Bir öğe için genişlik ve yükseklik de ayrı ayrı belirtilmişse bunlar aspect-ratio değerine öncelik kazanır.
Gizlilik
Tüm hesaplamalar tarayıcınızda yapılır. Hiçbir şey gönderilmez veya saklanmaz.