Aspect Ratio Calculator

How to Use the Aspect Ratio Calculator

This free online aspect ratio calculator reduces any width and height to its simplest ratio using the greatest common divisor (GCD). Enter 1920 and 1080 and you instantly get 16:9 along with the decimal value 1.7778. You can then lock that ratio and compute a missing dimension — type a width of 1280 at 16:9 and the height 720 appears automatically.

Features

• GCD-based ratio reduction, including decimal ratios such as 1.91:1 and 1:1.414 (A4)
• Ratio-locked dimension calculation: enter either width or height, get the other
• Presets for 16:9, 4:3, 1:1, 9:16 (vertical video), 21:9, 1.91:1 (OGP), 3:2, and A4
• Copyable CSS snippets: the modern aspect-ratio property and the legacy padding-top hack
• Recommended size charts for YouTube, Instagram, OGP, and TikTok/Shorts
• Runs entirely in your browser — no data is ever sent to a server

What is an aspect ratio?

An aspect ratio describes the proportional relationship between the width and height of an image, video, or screen. It is written as two numbers separated by a colon, such as 16:9. Two different resolutions can share the same aspect ratio: 1280x720, 1920x1080, and 3840x2160 are all 16:9 because each pair reduces to the same fraction. Keeping the aspect ratio constant while resizing prevents stretching and distortion, which is why responsive image and video containers in CSS are built around a fixed ratio rather than fixed pixels.

Aspect Ratio Calculatorの使い方

幅と高さ(例: 1920×1080)を入力すると、最大公約数(GCD)で割った既約比率(16:9)と小数値(1.7778)が即座に表示されます。 「この比率をロック計算で使う」で比率を固定すれば、幅か高さの一方を入力するだけでもう一方が自動計算されます。 プリセットには動画・SNS・印刷で頻出する8種類の比率を用意しました。計算結果はCSSのaspect-ratioプロパティとpadding-topハックの2形式でコピーできます。

実務での活用例

1. SNS・動画プラットフォームの推奨サイズ確認

サムネイルやOGP画像を作るとき、プラットフォームごとの推奨比率を毎回調べるのは手間です。主要な推奨サイズを以下にまとめました。

2. レスポンシブな動画埋め込みのCSS作成

YouTube埋め込みのiframeは幅に追従して高さが決まらないため、コンテナ側で比率を固定する必要があります。 16:9をプリセットで選び、aspect-ratio: 16 / 9をコピーして適用すれば、どの画面幅でも黒帯やはみ出しが発生しません。 Safari 14以前をサポートする案件では、もう一方のpadding-topハック(56.25%)を使います。

3. 画像リサイズ時の縦横計算

元画像3000×2000(3:2)をバナー幅1200pxに縮小する場合、比率ロックに3:2を設定して幅1200を入力すると高さ800が即座に得られます。 実際の縮小処理はImage Resizer、切り抜きで比率を変える場合はImage Cropperと組み合わせると効率的です。

よくあるエラーと対処 / Common Errors and Fixes

アスペクト比計算とCSS適用でつまずきやすいポイントをまとめました。

Common pitfalls when calculating aspect ratios and applying them in CSS.

言語別コード例 / Code Examples by Language

GCDによる既約化と比率ロック計算をコードで再現する最小サンプルです。

Minimal snippets to reduce ratios with GCD and compute ratio-locked dimensions.

JavaScript / TypeScript

// 最大公約数 / Greatest common divisor
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

// 1920x1080 -> "16:9"
function aspectRatio(w, h) {
  const g = gcd(w, h);
  return `${w / g}:${h / g}`;
}

// 比率ロック / Height from width at 16:9
const height = Math.round((1280 * 9) / 16); // 720

Python

from math import gcd
from fractions import Fraction

def aspect_ratio(w: int, h: int) -> str:
    g = gcd(w, h)
    return f"{w // g}:{h // g}"

print(aspect_ratio(1920, 1080))  # 16:9
print(Fraction(1200, 630))       # 40/21 (OGPの実比率 約1.905)

Go

func gcd(a, b int) int {
    for b != 0 {
        a, b = b, a%b
    }
    return a
}

func aspectRatio(w, h int) string {
    g := gcd(w, h)
    return fmt.Sprintf("%d:%d", w/g, h/g) // 1920, 1080 -> "16:9"
}

CSS

/* モダン / Modern (Chrome 88+, Safari 15+, Firefox 89+) */
.video { aspect-ratio: 16 / 9; }

/* 旧ブラウザ向け / Legacy padding-top hack */
.video-wrap { position: relative; width: 100%; }
.video-wrap::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 9 / 16 * 100 */
}

Before / After 実例 / Before & After

例1: 解像度から既約比率を求める / Reduce a resolution to its ratio

幅 1920 × 高さ 1080

↓ GCD = 120 で既約化

16:9 (1.7778 : 1)

例2: OGP画像の実際の比率 / The real ratio of an OGP image

幅 1200 × 高さ 630

↓ GCD = 30 で既約化

40:21 (1.9048 : 1)  ※ 通称 "1.91:1"

例3: 比率ロックで高さを逆算してCSS化 / Lock 16:9 and generate CSS

比率 16:9、幅 1280 を入力

↓

高さ 720

.box {
  aspect-ratio: 16 / 9;
}
/* または padding-top: 56.25%; */

padding-top の % は「高さ ÷ 幅 × 100」。16:9 なら 9 ÷ 16 × 100 = 56.25% です。

The padding-top percentage is height / width x 100; for 16:9 that is 9 / 16 x 100 = 56.25%.

Why browser-only? / なぜブラウザ完結か

An aspect ratio calculator may look harmless, but the numbers you type often describe unreleased work: banner dimensions for an unannounced campaign, screen sizes of an unshipped device, or layout specs from a client's private design system. A server-side calculator receives every keystroke as a request, and those requests can be logged, aggregated, or leaked. DevToolBox performs the GCD reduction, the ratio-locked dimension math, and the CSS snippet generation entirely in your browser with plain JavaScript. No network request is made after the page loads, nothing is stored, and you can verify this yourself: open DevTools, switch to the Network tab, use the calculator, and watch the tab stay empty. The tool also works offline once loaded, which makes it safe to use on restricted corporate networks.

入力する数値は「未公開キャンペーンのバナーサイズ」「未発表デバイスの画面解像度」など、公開前の情報であることが少なくありません。 本ツールはGCD計算・寸法逆算・CSS生成をすべてブラウザ内のJavaScriptで実行し、ページ読み込み後は一切の通信を行いません。 DevTools の Network タブが空のままであることで、外部送信がないことを自身で確認できます。