En-Boy Oranı Hesaplama
Ham HTML
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>En-Boy Oranı Hesaplama - Ücretsiz Aspect Ratio Aracı</title>
<meta name="description" content="Genişlik ve yükseklik değerlerini girin; sadeleştirilmiş en-boy oranını (16:9, 4:3 vb.) bulun veya bilinen orana göre eksik boyutu hesaplayın. %100 tarayıcıda çalışır.">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="En-Boy Oranı Hesaplama - Ücretsiz Aspect Ratio Aracı">
<meta property="og:description" content="Genişlik ve yükseklik değerlerini girin; sadeleştirilmiş en-boy oranını bulun veya bilinen orana göre eksik boyutu hesaplayın. %100 tarayıcıda çalışır, veri gönderilmez.">
<meta name="theme-color" content="#6366f1">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "En-Boy Oranı (Aspect Ratio) Hesaplama Aracı",
"description": "Genişlik ve yükseklik değerlerinden sadeleştirilmiş en-boy oranını hesaplayan, ayrıca bilinen bir orana göre eksik genişlik veya yükseklik değerini bulan ücretsiz online araç.",
"applicationCategory": "UtilitiesApplication",
"operatingSystem": "Any",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "TRY"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Aspect ratio (en-boy oranı) nedir?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Aspect ratio, bir görselin, videonun veya ekranın genişliğinin yüksekliğine oranıdır ve genellikle 16:9 veya 4:3 gibi iki sayı ile ifade edilir. Bu oran, görselin şeklini korumak için genişlik veya yükseklik değiştirildiğinde diğer boyutun nasıl değişmesi gerektiğini belirler."
}
},
{
"@type": "Question",
"name": "En-boy oranını nasıl sadeleştiririm?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Genişlik ve yükseklik değerlerinin en büyük ortak bölenine (OBEB) bölerek oranı sadeleştirebilirsiniz. Örneğin 1920x1080 değerlerinin OBEB'i 120'dir; her iki değeri 120'ye böldüğünüzde 16:9 oranını elde edersiniz. Bu araç bu işlemi sizin için otomatik yapar."
}
},
{
"@type": "Question",
"name": "Bilinen bir orana göre eksik boyutu nasıl bulurum?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Orijinal genişlik ve yükseklik değerlerini girip yeni genişlik veya yeni yükseklikten sadece birini doldurursanız, araç orantıyı koruyarak diğer boyutu otomatik olarak hesaplar. Böylece görseliniz veya tasarımınız orijinal oranını kaybetmeden yeniden boyutlandırılmış olur."
}
},
{
"@type": "Question",
"name": "Yaygın en-boy oranları (16:9, 4:3, 1:1) ne işe yarar?",
"acceptedAnswer": {
"@type": "Answer",
"text": "16:9 günümüz televizyon, monitör ve çoğu video platformunun standart genişekran oranıdır. 4:3 eski televizyonlarda ve bazı sunum formatlarında kullanılır. 1:1 (kare) ise sosyal medya paylaşımlarında, özellikle profil ve bazı gönderi görsellerinde tercih edilir."
}
}
]
}
</script>
<style>
:root {
--bg:#f5f6fb; --surface:#fff; --surface-2:#f0f2f9; --border:#e3e6f0;
--text:#1d2033; --muted:#6b7089; --primary:#6366f1; --primary-600:#4f46e5;
--primary-soft:#eef0ff; --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
--radius:16px; --shadow:0 10px 30px -12px rgba(30,35,90,.18);
}
* { box-sizing: border-box; }
body {
margin:0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height:1.55;
}
.container {
max-width: 720px;
margin: 0 auto;
padding: 24px 16px 60px;
}
header.hero {
text-align:center;
padding: 28px 0 8px;
}
header.hero h1 {
font-size: clamp(1.5rem, 4vw, 2rem);
margin: 0 0 8px;
}
header.hero p {
color: var(--muted);
margin:0;
font-size: 1rem;
}
.trust-badge {
display:inline-flex;
align-items:center;
gap:6px;
background: var(--primary-soft);
color: var(--primary-600);
font-size: .8rem;
font-weight:600;
padding:6px 14px;
border-radius:999px;
margin-top:12px;
}
.ad-slot {
min-height: 0;
}
.card {
background: var(--surface);
border:1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 24px;
margin: 20px 0;
}
.field {
margin-bottom: 16px;
}
.field label {
display:block;
font-size: .88rem;
font-weight:600;
margin-bottom:6px;
color: var(--text);
}
.field .hint {
font-size:.78rem;
color: var(--muted);
margin-top:4px;
}
.section-title {
font-size: .78rem;
font-weight:700;
text-transform: uppercase;
letter-spacing:.04em;
color: var(--primary-600);
margin: 4px 0 12px;
}
.divider {
border:none;
border-top: 1px dashed var(--border);
margin: 20px 0;
}
input[type="text"], input[type="number"] {
width:100%;
padding: 12px 14px;
border: 1px solid var(--border);
background: var(--surface-2);
border-radius: 12px;
font-size: 1rem;
color: var(--text);
outline:none;
transition: border-color .15s, box-shadow .15s;
}
input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.grid {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.btn {
width:100%;
padding: 14px 20px;
border:none;
border-radius: 12px;
background: var(--primary);
color:#fff;
font-size: 1rem;
font-weight:700;
cursor:pointer;
transition: background .15s, transform .05s;
margin-top: 6px;
}
.btn:hover { background: var(--primary-600); }
.btn:active { transform: scale(.99); }
.warning {
display:none;
background: #fff4e5;
border: 1px solid var(--warning);
color:#8a5a00;
padding: 12px 14px;
border-radius: 12px;
font-size:.88rem;
margin-top: 14px;
}
.warning.show { display:block; }
.result {
display:none;
margin-top: 20px;
border-top: 1px dashed var(--border);
padding-top: 18px;
}
.result.show { display:block; }
.result-grid {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}
.result-item {
background: var(--surface-2);
border-radius: 12px;
padding: 14px;
text-align:center;
}
.result-item .label {
font-size:.78rem;
color: var(--muted);
margin-bottom:6px;
}
.result-item .value {
font-size: 1.15rem;
font-weight:700;
color: var(--text);
}
.result-item.highlight .value { color: var(--primary-600); }
section.seo h2 {
font-size: 1.25rem;
margin: 28px 0 10px;
}
section.seo p {
color: var(--text);
font-size: .96rem;
}
details {
background: var(--surface);
border:1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
box-shadow: var(--shadow);
}
summary {
cursor:pointer;
font-weight:600;
font-size:.95rem;
}
details p {
margin: 10px 0 0;
color: var(--muted);
font-size:.9rem;
}
@media (max-width:480px) {
.card { padding:18px; }
}
</style>
</head>
<body>
<div class="container">
<header class="hero">
<h1>En-Boy Oranı (Aspect Ratio) Hesaplama Aracı</h1>
<p>Genişlik ve yükseklik değerlerinizi girin; sadeleştirilmiş en-boy oranını bulun veya orana göre eksik boyutu hesaplayın.</p>
<span class="trust-badge">🔒 %100 Tarayıcıda — Veriniz Hiçbir Yere Gönderilmez</span>
</header>
<!-- [reklam:arac-header] -->
<div class="ad-slot"></div>
<main class="card">
<div class="section-title">1. Orijinal Boyutlar</div>
<div class="grid">
<div class="field">
<label for="origWidth">Genişlik</label>
<input type="text" inputmode="decimal" id="origWidth" placeholder="Örn: 1920">
</div>
<div class="field">
<label for="origHeight">Yükseklik</label>
<input type="text" inputmode="decimal" id="origHeight" placeholder="Örn: 1080">
</div>
</div>
<hr class="divider">
<div class="section-title">2. Eksik Boyutu Hesapla (İsteğe Bağlı)</div>
<div class="grid">
<div class="field">
<label for="newWidth">Yeni Genişlik</label>
<input type="text" inputmode="decimal" id="newWidth" placeholder="Örn: 1280">
<div class="hint">Sadece bu veya aşağıdaki alanlardan birini doldurun.</div>
</div>
<div class="field">
<label for="newHeight">Yeni Yükseklik</label>
<input type="text" inputmode="decimal" id="newHeight" placeholder="Örn: 720">
</div>
</div>
<button class="btn" onclick="hesaplaOran()">Hesapla</button>
<div class="warning" id="warningBox"></div>
<div class="result" id="resultBox">
<div class="result-grid">
<div class="result-item highlight">
<div class="label">Sadeleştirilmiş Oran</div>
<div class="value" id="resRatio">-</div>
</div>
<div class="result-item">
<div class="label">Ondalık Oran</div>
<div class="value" id="resDecimal">-</div>
</div>
<div class="result-item" id="resCalcCard" style="display:none;">
<div class="label" id="resCalcLabel">Hesaplanan Boyut</div>
<div class="value" id="resCalcValue">-</div>
</div>
</div>
</div>
</main>
<!-- [reklam:arac-alt] -->
<div class="ad-slot"></div>
<section class="seo">
<h2>En-Boy Oranı (Aspect Ratio) Nedir?</h2>
<p>En-boy oranı, bir görselin, videonun, ekranın veya tasarımın genişliğinin yüksekliğine oranını ifade eder ve genellikle 16:9, 4:3 veya 1:1 gibi sadeleştirilmiş iki sayıyla gösterilir. Bu oran, içeriğin şeklini bozmadan farklı boyutlara ölçeklendirilmesini sağlar; örneğin bir fotoğrafı büyütürken veya küçültürken genişlik ve yükseklik arasındaki orantının korunması, görüntünün yamulmasını önler. Web tasarımından video prodüksiyonuna, baskı işlerinden sosyal medya içerik üretimine kadar pek çok alanda doğru en-boy oranını bilmek, profesyonel ve tutarlı bir görsel sonuç elde etmenin temelidir.</p>
<h2>Nasıl Kullanılır?</h2>
<p>Aracı iki farklı amaç için kullanabilirsiniz. Sadece oranı öğrenmek istiyorsanız, "Orijinal Boyutlar" bölümüne mevcut genişlik ve yükseklik değerlerinizi girip "Hesapla" butonuna basmanız yeterlidir; araç size sadeleştirilmiş oranı (örneğin 16:9) ve ondalık karşılığını gösterir. Eğer bilinen oranınızı koruyarak yeni bir boyuta ölçeklendirme yapmak istiyorsanız, orijinal boyutları girdikten sonra "Eksik Boyutu Hesapla" bölümündeki Yeni Genişlik veya Yeni Yükseklik alanlarından yalnızca birini doldurun; araç diğer boyutu orantıyı bozmadan otomatik olarak hesaplayacaktır. Tüm işlemler tarayıcınızda gerçekleştiği için girdiğiniz hiçbir değer kaydedilmez veya herhangi bir sunucuya gönderilmez.</p>
<h2>Sıkça Sorulan Sorular</h2>
<details>
<summary>Aspect ratio (en-boy oranı) nedir?</summary>
<p>Aspect ratio, bir görselin, videonun veya ekranın genişliğinin yüksekliğine oranıdır ve genellikle 16:9 veya 4:3 gibi iki sayı ile ifade edilir. Bu oran, görselin şeklini korumak için genişlik veya yükseklik değiştirildiğinde diğer boyutun nasıl değişmesi gerektiğini belirler.</p>
</details>
<details>
<summary>En-boy oranını nasıl sadeleştiririm?</summary>
<p>Genişlik ve yükseklik değerlerinin en büyük ortak bölenine (OBEB) bölerek oranı sadeleştirebilirsiniz. Örneğin 1920x1080 değerlerinin OBEB'i 120'dir; her iki değeri 120'ye böldüğünüzde 16:9 oranını elde edersiniz. Bu araç bu işlemi sizin için otomatik yapar.</p>
</details>
<details>
<summary>Bilinen bir orana göre eksik boyutu nasıl bulurum?</summary>
<p>Orijinal genişlik ve yükseklik değerlerini girip yeni genişlik veya yeni yükseklikten sadece birini doldurursanız, araç orantıyı koruyarak diğer boyutu otomatik olarak hesaplar. Böylece görseliniz veya tasarımınız orijinal oranını kaybetmeden yeniden boyutlandırılmış olur.</p>
</details>
<details>
<summary>Yaygın en-boy oranları (16:9, 4:3, 1:1) ne işe yarar?</summary>
<p>16:9 günümüz televizyon, monitör ve çoğu video platformunun standart genişekran oranıdır. 4:3 eski televizyonlarda ve bazı sunum formatlarında kullanılır. 1:1 (kare) ise sosyal medya paylaşımlarında, özellikle profil ve bazı gönderi görsellerinde tercih edilir.</p>
</details>
</section>
</div>
<script>
function gcd(a, b) {
a = Math.abs(a);
b = Math.abs(b);
while (b) {
var t = b;
b = a % b;
a = t;
}
return a;
}
function showWarning(msg) {
var box = document.getElementById("warningBox");
box.textContent = msg;
box.classList.add("show");
document.getElementById("resultBox").classList.remove("show");
}
function clearWarning() {
var box = document.getElementById("warningBox");
box.textContent = "";
box.classList.remove("show");
}
function hesaplaOran() {
clearWarning();
var origWidth = parseFloat(document.getElementById("origWidth").value.replace(",", "."));
var origHeight = parseFloat(document.getElementById("origHeight").value.replace(",", "."));
var newWidthRaw = document.getElementById("newWidth").value.trim();
var newHeightRaw = document.getElementById("newHeight").value.trim();
if (isNaN(origWidth) || origWidth <= 0 || isNaN(origHeight) || origHeight <= 0) {
showWarning("Lütfen geçerli bir orijinal genişlik ve yükseklik girin (0'dan büyük sayılar olmalı).");
return;
}
var hasNewWidth = newWidthRaw !== "";
var hasNewHeight = newHeightRaw !== "";
if (hasNewWidth && hasNewHeight) {
showWarning("Lütfen Yeni Genişlik veya Yeni Yükseklik alanlarından sadece birini doldurun, ikisini birden değil.");
return;
}
var newWidth = parseFloat(newWidthRaw.replace(",", "."));
var newHeight = parseFloat(newHeightRaw.replace(",", "."));
if (hasNewWidth && (isNaN(newWidth) || newWidth <= 0)) {
showWarning("Lütfen geçerli bir yeni genişlik değeri girin (0'dan büyük olmalı).");
return;
}
if (hasNewHeight && (isNaN(newHeight) || newHeight <= 0)) {
showWarning("Lütfen geçerli bir yeni yükseklik değeri girin (0'dan büyük olmalı).");
return;
}
var factor = 100;
var a = Math.round(origWidth * factor);
var b = Math.round(origHeight * factor);
var g = gcd(a, b) || 1;
var ratioA = a / g;
var ratioB = b / g;
var decimalRatio = origWidth / origHeight;
document.getElementById("resRatio").textContent = ratioA + " : " + ratioB;
document.getElementById("resDecimal").textContent = decimalRatio.toFixed(3);
var calcCard = document.getElementById("resCalcCard");
var calcLabel = document.getElementById("resCalcLabel");
var calcValue = document.getElementById("resCalcValue");
if (hasNewWidth) {
var calculatedHeight = newWidth * (origHeight / origWidth);
calcLabel.textContent = "Hesaplanan Yükseklik";
calcValue.textContent = roundNice(calculatedHeight);
calcCard.style.display = "block";
} else if (hasNewHeight) {
var calculatedWidth = newHeight * (origWidth / origHeight);
calcLabel.textContent = "Hesaplanan Genişlik";
calcValue.textContent = roundNice(calculatedWidth);
calcCard.style.display = "block";
} else {
calcCard.style.display = "none";
}
document.getElementById("resultBox").classList.add("show");
}
function roundNice(value) {
var rounded = Math.round(value * 100) / 100;
if (Number.isInteger(rounded)) return rounded.toString();
return rounded.toFixed(2);
}
</script>
</body>
</html>
Kategori
Görsel ve Medya Araçları
MMUTLU.CMS
Kurumsal web siteleri için içerik yönetim sistemi.
© 2026 Mutlu DoğruBu site MUTLU.CMS ile yayınlanmaktadır.