アスペクト比の計算ツール｜16:9・4:3の縦横サイズ早見表と求め方

上の計算欄は2つの使い方に切り替えられます。「縦横のサイズから比を求める」では、幅と高さを入れると約分した比・小数の比・近いよく使う比・CSS の書き方が出ます。「比と幅（高さ）から求める」では、16:9 などの比と分かっている長さから、もう一方の長さが出ます。入力した値はどこにも送信されず、ブラウザの中だけで計算します。くわしい使い方は「アスペクト比の計算ツールの使い方」の節にまとめました。

flowchart TD
    A[幅 1920 と 高さ 1080] --> B[最大公約数を求める<br>120]
    B --> C[両方を 120 で割る]
    C --> D[16 : 9]
    D --> E[幅 1000 なら<br>1000 ÷ 16 × 9 = 562.5]
    E --> F[画像は 562 か 563<br>動画は偶数の 562]

よく調べられることの答えを先にまとめます。

この記事で実際に動かしたもの：計算ツール本体（Chromium）、Python と Node.js での約分・丸め、Chromium での CSS の寸法の計測、ffmpeg でのテスト動画の縮小・余白・切り抜き、Pillow での画像のリサイズと EXIF の向きの確認。

確認環境：Ubuntu 24.04.5 LTS（2コア）の上で、Python 3.13.18 の math.gcd・fractions と、Node.js 22.23.4 で約分と丸めを計算しました。計算ツールはサイトのテーマの JavaScript をそのまま読み込んだ自分のページを、Playwright 1.63.0 同梱の Chromium（version() の値は 153.0.8010.12、幅390pxのスマホ表示）で開き、見本ボタンと入力欄を操作した出力を記録しています。CSS の aspect-ratio と padding-top の寸法は同じ Chromium の getBoundingClientRect で測りました。動画は FFmpeg 6.1.1（Ubuntu 版、libx264）で testsrc2 から作った 1920×1080 と 1440×1080 の0.5秒の動画を変換し、ffprobe で幅・高さ・SAR・DAR を読みました。画像は Pillow 12.3.0 と ImageMagick の identify で確かめています。ページはすべて手元のファイルを開いたもので、外部のサービスには接続していません。YouTube の推奨解像度は YouTube ヘルプ、OGP 画像の推奨サイズは Meta の開発者向けドキュメント、CSS の仕様は MDN で確かめました。Instagram と X の推奨比は、公式ヘルプのページが手元の取得では本文を表示しなかったため、確かめられた記述だけを載せています。図は mermaid 11.16.0 で描画を確かめています（確認日 2026年11月9日）。

アスペクト比とは（意味と読み方）

この節では、アスペクト比という言葉の意味と、「16:9」の読み方、場面によって指すものが変わる点が分かります。

アスペクト比（aspect ratio）は、長方形の「横の長さ：縦の長さ」の比です。日本語では「縦横比」とも呼びますが、書き方は横が先で、16:9 は「横16に対して縦9」を表します。1920×1080 の画像も 1280×720 の画像も、形（比）は同じ16:9です。大きさ（ピクセル数）と形（比）は別のものだと考えると、計算で迷いにくくなります。

IT で「アスペクト比」と言うと、次のどれを指しているかで意味が少し変わります。

動画の「ピクセル1つの比（SAR）」は見落とされやすく、ピクセル数が 1440×1080（4:3）なのに再生すると 16:9 に見える動画があります。これは後の「SAR と DAR」の節で、ffmpeg の実物とともに説明します。

比の書き方は3通り

• 整数の比：16:9、4:3。いちばんよく使う書き方です。
• 小数の比：1.78:1、2.35:1、1.91:1。映画（シネマスコープ）や OGP 画像でよく使います。
• 縦÷横の割合：0.5625（＝56.25%）。CSS の padding-top や、高さを求める掛け算で使います。

同じ16:9でも、整数で書くと 16:9、小数で書くと 1.78:1、縦÷横で書くと 0.5625 です。計算ツールはこの3つを同時に出します。

アスペクト比の計算方法（最大公約数で約分する）

この節では、幅と高さからアスペクト比を求める手順と、プログラムで計算したときの出力が分かります。

幅と高さの最大公約数（両方を割り切れるいちばん大きな数）で、両方を割ります。分数の約分と同じ考え方です。

Python では math.gcd、JavaScript では数行の関数で同じ計算ができます。手元で実行した結果です。

from math import gcd
for w, h in [(1920, 1080), (1366, 768), (2560, 1080)]:
    g = gcd(w, h)
    print(f"{w}x{h}  gcd={g}  ->  {w//g}:{h//g}  w/h={w/h:.4f}")

1920x1080  gcd=120  ->  16:9  w/h=1.7778
1366x768  gcd=2  ->  683:384  w/h=1.7786
2560x1080  gcd=40  ->  64:27  w/h=2.3704

const gcd = (a, b) => b ? gcd(b, a % b) : a;
for (const [w, h] of [[1920, 1080], [1366, 768], [2560, 1080]]) {
  const g = gcd(w, h);
  console.log(`${w}x${h} -> ${w / g}:${h / g}`);
}

1920x1080 -> 16:9
1366x768 -> 683:384
2560x1080 -> 64:27

1366×768 は、きっちり約分すると16:9ではなく 683:384 です。ずれは約0.05%で、目で見ても区別できないため、一般には「16:9 の画面」として扱われています。この「ほぼ同じ」をどう扱うかは、比を CSS や動画の設定に書き写すときに効いてきます。

16:9・4:3 などの縦横サイズ早見表（解像度の一覧）

この節では、よく使うアスペクト比ごとの代表的なサイズ（解像度）と、CSS の padding-top に使う割合が分かります。

下の表は、Python で各サイズを約分し、縦÷横の割合を計算した結果です。用途は一般的な使われ方の例です。

YouTube ヘルプでは、16:9 の動画の推奨解像度として 3840×2160（2160p）、2560×1440（1440p）、1920×1080（1080p）、1280×720（720p）、854×480（480p）、640×360（360p）、426×240（240p）が挙がっています。854×480 と 426×240 は、約分すると 427:240・71:40 で、きっちりの16:9ではありません（幅を偶数にそろえた結果です）。

「16:9 っぽいが16:9ではない」サイズ

次のサイズは、名前や見た目から16:9や4:3と思われがちですが、約分すると別の比になります。

スマホの画面は機種ごとに比がばらばらで、9:16 に収まらないものが多くあります。縦動画を作るときは 1080×1920（9:16）で作り、画面の上下や左右は端末側の表示に任せるのが一般的です。

比と幅から高さを求める計算（16:9 で幅1000なら高さは？）

この節では、比と片方の長さからもう一方を出す式と、割り切れないときの丸め方の違いが分かります。

高さ ＝ 幅 ÷ 比の横 × 比の縦、幅 ＝ 高さ ÷ 比の縦 × 比の横 です。16:9 で幅1280なら 1280 ÷ 16 × 9 ＝ 720、高さ1080なら 1080 ÷ 9 × 16 ＝ 1920 です。Python で幅ごとに高さを計算した結果を表にしました。

16:9 で高さが整数になるのは、幅が16の倍数のときです。さらに高さが偶数になる（動画に使いやすい）のは、幅が32の倍数のときでした（Python で16〜2000の範囲を調べ、32・64・96…の62個）。

四捨五入は言語で結果が変わる

562.5 を整数にするとき、JavaScript は563、Python は562を返しました。Python の round() は「ちょうど半分なら偶数の側へ丸める」決まり（偶数丸め）のためです。

$ node -e 'console.log(Math.round(562.5), Math.round(607.5))'
563 608
$ python3 -c 'import math; print(round(562.5), round(607.5), math.floor(562.5+0.5))'
562 608 563

どちらが正しいということはなく、ずれは1ピクセルです。ただ、同じ画像を JavaScript と Python の別々の処理で作ると、高さが1ピクセル違うことがあります。そろえたいときは、丸め方を「切り捨て」「偶数にそろえる」など1つに決めて、両方に同じ式を書きます。この記事の計算ツールは JavaScript の Math.round と同じ丸め方で、幅1000・16:9 のときは「1000 × 563 に丸めます」と表示しました。

アスペクト比の計算ツールの使い方

この節では、記事の冒頭にある計算ツールでできることと、実際に入力したときの表示が分かります。

ツールは上の切り替えで2つの使い方ができます。どちらも計算はブラウザの中だけで行い、入力した値は送信しません。

見本ボタンは、サイズ側が 1920×1080・1080×1920（縦）・1200×630（OGP）・2560×1080・1366×768・3024×4032（iPhone）、比の側が 16:9・4:3・3:2・1:1・21:9・9:16・4:5・16:10 です。押すとその値が入り、すぐ結果が変わります。

実際に入力したときの表示

Chromium でツールを開き、見本ボタンと入力欄を操作したときの表示を記録しました。

比の側では、16:9 で幅1000を入れると「割り切れないため小数になりました。画像や動画のサイズにするときは 1000 × 563 に丸めます（動画は偶数にそろえると安全です）。」と出て、サイズの欄は「1,000 × 562.5」でした。高さ1080から9:16の幅を出すと 607.5 で、丸めた値は 608 × 1080 です。

読み方のこつ

• 1366×768 は「比（約分）」が 683:384、「よく使う比」が16:9です。ずれが約1%より小さいときは、よく使う比に一致すると表示されます。厳密な比が必要な設定（動画の書き出しなど）では約分の欄を使います。
• 小数を入れると、約分の欄は「—」になります。16.5:9 のような比は整数の比にせず、小数の比と CSS の欄を使います。
• 比は「幅:高さ」の順です。縦長の写真（3024×4032）は 3:4 と出ます。4:3 と出したいときは幅と高さを入れ替えます。

SNS・動画サイトの推奨アスペクト比（YouTube・OGP）

この節では、YouTube やリンクのプレビュー画像（OGP）など、公式のドキュメントで確かめられた推奨のアスペクト比が分かります。

Instagram の縦長（4:5）・横長の比や、X の画像の推奨比は、公式ヘルプのページを手元で取得すると本文が表示されず、確かめられませんでした。アプリの投稿画面で切り抜きの枠を確かめるのが確実です。各サービスの推奨は変わることがあるため、上の表は2026年11月9日時点の内容です。

OGP 画像を HTML の meta タグで指定する書き方は、関連記事「HTML metaタグ一覧｜SEO・OGP・viewportのコピペ用テンプレート」で扱っています。

YouTube のヘルプが「動画に黒い帯を足さない」と書いているのは、プレーヤーが自動で余白を付けるためです。黒い帯を焼き込むと、全画面やスマホで見たときに二重に余白が付きます。

21:9 の正体（64:27・43:18・2.35:1）

この節では、「21:9」と呼ばれる画面や映画の比が、実際には何対何なのかが分かります。

「21:9」のウルトラワイドモニターは、実際には 2560×1080（64:27）や 3440×1440（43:18）です。21:9 をそのまま小数にすると 2.333 ですが、64:27 は 2.370、43:18 は 2.389 で、どちらも少し横に長くなります。21:9 は「16:9 より横長」をざっくり示す呼び名と考えるのが実態に合います。

計算ツールでは、2560×1080 は「近いのは 21:9（ずれ 1.59%）」、3440×1440 は「近いのは 21:9（ずれ 2.38%）」と表示されました。一方で 1920×817（2.35:1）は 21:9 とのずれが約1%未満のため「21:9」と表示されます。映画の 2.35:1 や 2.39:1 と、モニターの 64:27・43:18 は、どれも「21:9」と呼ばれることがあるので、正確な数が要るときは約分の欄か幅÷高さで比べます。

21:9 の動画をそのまま 16:9 の画面で再生すると、上下に黒い帯が付きます（レターボックス）。逆に 16:9 の動画をウルトラワイドの画面で再生すると、左右に帯が付きます（ピラーボックス）。どちらも元の比を保った結果です。

CSS の aspect-ratio で縦横比を保つ（padding-top との違い）

この節では、Web ページで要素や画像の縦横比を保つ CSS の書き方と、Chromium で測った実際の寸法が分かります。

今の CSS では aspect-ratio: 16 / 9; の1行で、幅に合わせて高さが決まります。MDN では、2021年9月以降すべての主要ブラウザーで使える（Baseline: Widely available）と案内されています。以前は、高さ0の箱に padding-top: 56.25% を付ける方法が使われていました（padding の％は親の幅を基準にするため）。

.box-new { aspect-ratio: 16 / 9; }
.box-old { position: relative; height: 0; padding-top: 56.25%; }
.box-fit { aspect-ratio: 16 / 9; min-height: 0; overflow: auto; }

幅320pxの親の中に置いた要素の大きさを、Chromium の getBoundingClientRect で測りました。

16:9 を小数の 1.7778 で書くと、高さが 179.984375px になりました。わずかな差ですが、整数の比（16 / 9）で書けば割り算の誤差が入りません。計算ツールの CSS の欄は、約分した整数の比で出します。

画像は width と height を書いておく

img に width と height の属性を書くと、Chromium は aspect-ratio: auto 1920 / 1080 を自動で当て、画像の読み込み前から 320×180 の場所を確保しました。CSS で width: 100%; height: auto; にしても比が保たれ、読み込み後にページががたつく（レイアウトのずれ）のを防げます。

決まった枠の中に画像を収める object-fit（cover・contain）の使い分けは、関連記事「CSS object-fit・aspect-ratio｜画像トリミング5パターン」で、画像のサイズ指定と中央寄せは関連記事「CSSで画像サイズを指定する方法 縦横比維持・中央寄せ・はみ出し対策」で扱っています。

ffmpeg で動画のアスペクト比を変える（scale・pad・crop）

この節では、ffmpeg で動画を縮小・余白付け・切り抜きしたときのサイズと、偶数にそろえないと出るエラーが分かります。

1920×1080（16:9）と 1440×1080（4:3）のテスト動画を作り、フィルターごとに変換して ffprobe で読んだ結果です。

ffmpeg -i src169.mp4 -vf scale=1280:-1 a.mp4
ffmpeg -i src169.mp4 -vf scale=1000:-2 d.mp4
ffmpeg -i src43.mp4  -vf "pad=1920:1080:(ow-iw)/2:(oh-ih)/2" e.mp4
ffmpeg -i src169.mp4 -vf "crop=ih:ih" f.mp4
ffmpeg -i src169.mp4 -vf "scale=1080:1920:force_original_aspect_ratio=increase,crop=1080:1920,setsar=1" r.mp4
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,sample_aspect_ratio,display_aspect_ratio -of csv=p=0 r.mp4

-1 は「比を保って自動で計算」、-2 は「比を保ったうえで2の倍数にそろえる」という意味です。crop=ih*9/16:ih は 607.5 になるところを 608 に丸めたため、表示の比は 9:16 ではなく 76:135 になりました。

height not divisible by 2：動画のサイズを偶数にそろえる理由

16:9 で幅1000にすると高さは562.5になり、ffmpeg は563に丸めたうえで、libx264 のところで止まりました。手元で出た原文です。

[libx264 @ 0x5608343d2d80] height not divisible by 2 (1000x563)
[vost#0:0/libx264 @ 0x5608343d2ac0] Error while opening encoder - maybe incorrect parameters such as bit_rate, rate, width or height.
Error while filtering: Generic error in an external library
Conversion failed!

幅を奇数にしても width not divisible by 2 (1001x564) と出ました。ふつうの動画（yuv420p）は、色の情報を縦横とも2ピクセルに1つの割合で持つため、幅と高さが2で割り切れないと符号化できません。scale=1000:-2 にすると 1000×562 になり、変換が通りました。

• 1高さ（幅）の自動計算は -1 でなく -2 にする562.5 のような半端な値でも偶数の 562 に丸めて通る
• 2枠に収めるなら force_divisible_by=2 を付けるforce_original_aspect_ratio=decrease と一緒に使うと、1000×1000 の枠に 1000×562 で収まった
• 3最後に setsar=1 を付ける縮小や切り抜きで SAR が 1124:1125 などにずれるのを 1:1 に戻す
• 4書き出した後に ffprobe で4つの値を見るwidth・height・sample_aspect_ratio・display_aspect_ratio が意図どおりか

ffmpeg の変換・圧縮・切り出しの基本は、関連記事「ffmpegの使い方｜MOV→MP4変換・圧縮・切り出しを実測で解説」で扱っています。

SAR と DAR：ピクセルの縦横比で見た目が変わる

この節では、動画のピクセル数の比と、再生したときに見える比が違う場合があることと、その直し方が分かります。

動画には「ピクセル数の比」「ピクセル1つの比（SAR）」「見える比（DAR）」の3つがあり、DAR ＝ ピクセル数の比 × SAR です。SAR が 1:1 ならピクセル数の比がそのまま見える比になりますが、1:1 でない動画は、プレーヤーがピクセルを横に伸ばしたり縮めたりして表示します。

手元では、ffmpeg の scale は、ピクセル数の比を変えると SAR を自動で調整して、見える比（DAR）を元のまま保とうとしました。4:3 の動画を 1920×1080 に scale しただけでは、ファイルのピクセル数は16:9でも、再生すると4:3に見えます。「16:9 に変換したはずなのに左右に帯が出る」ときは、ffprobe で SAR を確かめます。逆に setsar=1 を付けると、ピクセル数の比がそのまま見える比になり、4:3 の素材は横に伸びて見えます。

1000×562 に setsar=1 を付けた場合の DAR は 500:281（1.7794）で、16:9（1.7778）とのずれは約0.09%です。見た目では区別できないため、Web 用の動画ではこちら（SAR 1:1）のほうが扱いやすくなります。

Python（Pillow）で画像のアスペクト比を保ってリサイズする

この節では、Pillow で縦横比を保ったまま縮小・枠に収める・切り抜く方法と、スマホの写真で縦横が逆に読まれる原因が分かります。

from PIL import Image, ImageOps
src = Image.new("RGB", (1920, 1080))
w = 1000; h = round(w * src.height / src.width)
print(src.resize((w, h)).size)
t = src.copy(); t.thumbnail((800, 800)); print(t.size)
print(ImageOps.contain(src, (1080, 1080)).size)
print(ImageOps.fit(src, (1080, 1080)).size)
print(ImageOps.pad(src, (1080, 1080)).size)
print(ImageOps.fit(src, (1200, 630)).size)

(1000, 562)
(800, 450)
(1080, 608)
(1080, 1080)
(1080, 1080)
(1200, 630)

スマホの写真は EXIF の向きで縦横が入れ替わる

スマホで縦に持って撮った写真は、画素は横長（4032×3024）のまま保存し、「90度回して表示する」という情報（EXIF の Orientation）を付けていることがあります。同じ形のファイルを作って読むと、次のようになりました。

Orientation = 6  Image.size = (4032, 3024)
exif_transpose 後 = (3024, 4032)
identify: 4032x3024 orient=RightTop

Pillow の Image.size は回す前の 4032×3024（4:3）を返し、ImageOps.exif_transpose() を通すと 3024×4032（3:4）になりました。アスペクト比を計算する前に向きをそろえないと、縦長の写真を横長として扱ってしまいます。計算ツールの見本ボタン「3024×4032（iPhone）」は、向きをそろえたあとのサイズです。

Pillow のリサイズ・トリミング・形式変換のコードは、関連記事「Python Pillowで画像処理｜リサイズ・トリミング・形式変換のコード集」で扱っています。

アスペクト比のよくあるつまずき（症状→原因→直し方）

この節では、アスペクト比の計算や変換でよく起きる症状と、その原因・直し方が一覧で分かります。

aspect-ratio は、MDN の説明では「幅か高さの少なくとも一方が auto のとき」に効きます。width と height を両方とも固定した要素に書いても、比は使われません。

アスペクト比を合わせる方法の判断表

この節では、比の違う素材を目的のサイズに合わせるとき、どの方法を選べばよいかが分かります。

次の順に考えると、選ぶ方法が決まります。

1. 1比が同じ → 縮小・拡大だけffmpeg は scale=1280:-2、Pillow は thumbnail、CSS は width と height: auto
2. 2全体を必ず見せたい → 余白を付ける（contain・pad）資料・スクリーンショット・ロゴ
3. 3枠をすき間なく埋めたい → 切り抜く（cover・crop・fit）サムネイル・背景・縦動画への作り直し。大事な部分が中央にあるか確かめる
4. 4形が変わってよい → 引き伸ばすグラデーションや模様など、ゆがみが目立たない素材だけ
5. 5サービスに上げる → そのサービスの推奨と表示に任せるYouTube は元の比のまま上げ、黒い帯を焼き込まない

よくある質問

この節では、アスペクト比の計算でよく聞かれる疑問への短い答えが分かります。

Q. アスペクト比の求め方を一言でいうと？
幅と高さを、両方を割り切れるいちばん大きな数（最大公約数）で割ります。1920×1080 なら120で割って16:9です。

Q. 16:9 で幅が分かっているとき、高さはどう出しますか？
幅 ÷ 16 × 9 です。幅1280なら720、幅1000なら562.5です。整数にするときは丸め方を決め、動画なら偶数にそろえます。

Q. 4:3 と 16:9 はどちらが新しいのですか？
テレビやパソコンの画面は 4:3 から 16:9 へ移りました。今の動画や画面は 16:9 が標準で、4:3 は iPad や一部のカメラなどで使われています。

Q. 1920×1080 と 1280×720 は同じアスペクト比ですか？
同じ16:9です。ピクセル数（大きさ）が違うだけで、形は同じです。

Q. 縦横比を％で表すと？
縦 ÷ 横 × 100 です。16:9 は56.25%、4:3 は75%、1:1 は100%です。CSS の padding-top で縦横比を作るときに使います。

Q. 21:9 のモニターの解像度は？
多いのは 2560×1080 と 3440×1440 で、約分するとそれぞれ 64:27 と 43:18 です。きっちり21:9（2.333）ではありません。

Q. Excel や電卓で計算できますか？
Excel には最大公約数を出す GCD 関数があり、幅と高さをそれぞれその値で割れば比になります。電卓なら「縦 ÷ 横」で小数の比を出し、早見表の値（16:9 は0.5625）と比べます。

Q. 動画の幅や高さはなぜ偶数にするのですか？
ふつうの動画（yuv420p）は色の情報を2×2ピクセルに1つの割合で持つため、奇数だと符号化できません。ffmpeg では「height not divisible by 2」のエラーになります。

Q. 写真のアスペクト比が逆に出ます。
スマホの写真は、画素を横長のまま保存して「回して表示する」情報を付けていることがあります。Pillow なら ImageOps.exif_transpose() で向きをそろえてから計算します。

Q. 計算ツールに入れた数値は送信されますか？
送信されません。計算はブラウザの中だけで行います。

Q. CSS で 16:9 の箱を作るには？
aspect-ratio: 16 / 9; を書き、幅だけ決めます。中身が多くて高さが伸びるときは min-height: 0; overflow: auto; を足します。

まとめ

この節では、記事の要点が5つに分かります。

• アスペクト比は「幅：高さ」の比。幅と高さを最大公約数で割ると求まる（1920×1080 → 16:9）。
• 高さ ＝ 幅 ÷ 比の横 × 比の縦。割り切れないときは丸め方を1つに決め、動画は偶数にする（ffmpeg は -2）。
• 1366×768 は 683:384、21:9 のモニターは 64:27・43:18。「ほぼ同じ」は幅÷高さで比べる。
• CSS は aspect-ratio を整数の比で書き、img には width・height を書く。動画は SAR を確かめて setsar=1。
• 比の違う素材は「余白を付ける」「切り抜く」のどちらかで合わせ、引き伸ばさない。

次に読むとよい記事です。画像を Web で表示するときの CSS は関連記事「CSS object-fit・aspect-ratio｜画像トリミング5パターン」、動画の変換は関連記事「ffmpegの使い方｜MOV→MP4変換・圧縮・切り出しを実測で解説」で扱っています。

参考・出典

確認日はいずれも 2026年11月9日です。

• YouTube ヘルプ「動画の解像度とアスペクト比 - パソコン」：https://support.google.com/youtube/answer/6375112?hl=ja
• Meta for Developers「Images in Link Shares」：https://developers.facebook.com/docs/sharing/webmasters/images
• Instagram ヘルプセンター：https://help.instagram.com/1631821640426723
• MDN「aspect-ratio - CSS」：https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio
• FFmpeg「FFmpeg Filters Documentation」（scale・pad・crop・setsar）：https://ffmpeg.org/ffmpeg-filters.html
• Pillow「ImageOps Module」：https://pillow.readthedocs.io/en/stable/reference/ImageOps.html
• Python「math --- 数学関数」（math.gcd）：https://docs.python.org/ja/3/library/math.html

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。