En-Boy Oranı Hesaplayıcı (yeniden boyutlandırmada oran koruma)

En-boy oranı nedir?

En-boy oranı, genişliği yüksekliğe göre tanımlar: 16:9, her 9 birim yükseklik için 16 birim genişlik anlamına gelir. Aynı oran her boyutta geçerlidir — 1920×1080 ve 800×450 her ikisi de 16:9'dur. Yeniden boyutlandırırken en-boy oranını korumak, görüntülerin uzayıp sıkışmasını önler ve duyarlı tasarımın temelidir.

Oran için tam sayı (16:9) veya ondalık (1,78:1) kabul edilir; genişlik/yükseklik için herhangi bir boyut girilebilir. Herhangi bir alanı düzenle — oranı korumak için diğerleri güncellenir. Genişlik / yükseklik olarak ondalık oran, CSS calc() ifadelerinde veya video düzenleme araçlarında kullanılmak üzere gösterilir.

Yaygın oranlar ve kullanım alanları

16:9 — modern HDTV, bilgisayar monitörleri, YouTube, 2009'dan itibaren çoğu film. Günümüzde neredeyse her şeyin varsayılanı.

9:16 — Instagram Hikayeler, TikTok, YouTube Shorts için dikey video. Telefon öncelikli içerik için 16:9'un ters çevrilmiş hali.

1:1 — kare. 2021'e kadar Instagram akışı varsayılanı. Albüm kapakları, profil fotoğrafları.

4:3 — HD öncesi eski TV'ler ve bilgisayar monitörleri. Hâlâ bazı klasik tarz içerikler için kullanılır.

3:2 — DSLR fotoğraf makinesi varsayılanı. 35mm film. Büyük baskılar.

21:9 — ultra geniş sinematik. Anamorfik çekim yapılan filmler. Bazı PC monitörleri ve geniş ekran TV'ler.

CSS aspect-ratio neden önemlidir?

Modern CSS'de aspect-ratio: 16/9; özelliği vardır — oranı ayarla, tarayıcı genişlikten yüksekliği (veya tersi) hesaplasın. Eski padding-bottom hack'inin yerini almış ve duyarlı gömülü içerikler ile görüntü yer tutucuları için düzen kaymasını önlemede vazgeçilmezdir.

Kümülatif Düzen Kayması (CLS) bir Core Web Vitals metriğidir. Gömülü videolar, boyutsuz görseller ve reklamlar CLS'ye neden olabilir — boyutları açıkça belirleyerek (tarayıcı bunu en-boy oranını hesaplamak için kullanır) veya CSS aspect-ratio ile düzeltebilirsin.