16:9 en-boy oranı kaç piksel olmalı?

16:9 oranını sağlayan yaygın çözünürlükler: 1920×1080 (Full HD), 1280×720 (HD Ready), 3840×2160 (4K UHD), 2560×1440 (QHD). Web'de video embed için 16:9 standart haline gelmiştir; YouTube, Vimeo ve sosyal medyalar bu oranı varsayılan olarak kullanır. 1920 geniş bir sayfa için 16:9'dan yüksekliği hesaplamak: 1920 ÷ 16 × 9 = 1080 px.

CSS aspect-ratio özelliği nasıl kullanılır?

Modern CSS ile aspect-ratio: 16 / 9; yazıldığında, eleman genişliği sabitse yüksekliği otomatik hesaplanır. Eski yöntemde padding-top: 56.25% (9÷16×100) hilesi kullanılırdı; bu yaklaşım içeriği absolute konumlandırmayı gerektiriyordu. aspect-ratio tüm modern tarayıcılarda desteklenir ve çok daha temiz bir çözümdür. Örnek: .video-wrapper { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }

Sosyal medya görselleri için hangi oranlar geçerli?

Open Graph ve Facebook paylaşım görseli: 1.91:1 (1200×630). Twitter/X büyük kart: 2:1 yaklaşık (1200×600 veya 1200×628). Instagram kare: 1:1 (1080×1080). Instagram dikey: 4:5 (1080×1350). LinkedIn paylaşım görseli: 1.91:1 (1200×627). Pinterest dikey pin: 2:3 (1000×1500). Her platforma ayrı oran optimizasyonu gerçekten tıklama oranını artırır.

Tasarım Aracı

Aspect Ratio Hesaplayıcı

En-boy oranlarını hesaplayın, oran koruyarak boyutları dönüştürün ve CSS değerlerini alın.

Genişlik (px)

Yükseklik (px)

Yaygın En-Boy Oranları ve Kullanım Alanları

16:9 — Video, YouTube, sunum slaytları, TV standartı. 1920×1080, 1280×720, 3840×2160.
4:3 — Eski monitörler, eğitim platformu videoları, iPad ekranı yaklaşığı.
1:1 — Instagram kare post, profil fotoğrafları, ürün görselleri.
9:16 — Dikey video, Instagram/TikTok Reels, Story formatı.
4:5 — Instagram dikey post (1080×1350), akışta daha fazla yer kaplar.
1.91:1 — Open Graph / Facebook / LinkedIn paylaşım görseli (1200×630).
21:9 — Ultra geniş ekran, sinematik film formatı, gaming monitörleri.

CSS aspect-ratio ile Sıfır-Yükseklik Sorunu

Eski yöntemde padding-top: 56.25% (9÷16×100) hilesi kullanılırdı: ebeveyn elemana bu padding verilir, içerik absolute konumlandırılırdı. Modern CSS'de aspect-ratio: 16 / 9 yazarak aynı sonucu çok daha temiz şekilde elde edebilirsiniz. Tüm modern tarayıcılar (Chrome 88+, Firefox 89+, Safari 15+) destekler; IE desteğine ihtiyaç yoksa eski yöntemden vazgeçmek mantıklıdır.

Sık Sorulan Sorular

Görsel oranını değiştirmeden yeniden boyutlandırmak için ne yapmalıyım?

Bu araçta genişlik girin, yüksekliği boş bırakın — oran otomatik hesaplanır. Kod düzeyinde ise CSS'de object-fit: cover veya object-fit: contain kullanmak görseli oranını bozarak kırpılmasını (cover) veya içine sığdırılmasını (contain) sağlar. Görüntü editöründe Photoshop'ta Shift+sürükleme veya "Oranları Kilitle" seçeneği aynı işi yapar.

İlgili araçlar: Meta Tag Önizleme · Border Radius · Box Shadow Generator