アスペクト比計算ツール
アスペクト比計算ツールは、幅・高さから比率を自動算出したり、比率から片方の数値を逆算できる無料ツールです。CSSのaspect-ratioやpadding-topコードもワンクリックでコピーできます。
px
px
16:9
整数比
1.7778
小数比（W ÷ H）
56.25%
padding-top
:
px
px
端数処理
aspect-ratio（モダンCSS）
aspect-ratio: 16 / 9;
padding-top（従来手法）
padding-top: 56.25%;
主要比率 早見表（クリックで適用）
アスペクト比計算ツールとは？
アスペクト比計算ツールは、幅と高さの数値から画面や画像の縦横比（アスペクト比）を自動で計算できる無料ツールです。「幅・高さ→比率」だけでなく「比率・片方の数値→もう片方の数値」も逆算できる双方向計算に対応しており、動画・画像の書き出しサイズ決めや、CSSでの比率固定レイアウト実装に役立ちます。
padding-top（従来手法）について
CSSでは
widthを%指定すると親要素の幅を基準に計算されますが、実はpadding-topやpadding-bottomを%指定した場合も、高さではなく親要素の「幅」を基準に計算されるという仕様があります。padding-topテクニックは、この一見不思議な仕様を逆手に取り、高さがまだ決まっていない要素にも比率を固定させる、CSSのaspect-ratioプロパティが登場する以前から使われてきた手法です。
-
STEP1：親要素の高さをpaddingだけで作る要素に
position: relative; height: 0; overflow: hidden;を指定します。高さを0にすることで、この後指定するpaddingの数値がそのまま要素の見た目上の高さになります。 -
STEP2：padding-topに比率のパーセントを指定する「高さ ÷ 幅 × 100」で求めたパーセンテージを
padding-topに指定します。例えば16:9であれば9÷16×100＝56.25%です（本ツールの計算結果と同じ値になります）。 -
STEP3：中身の要素を絶対配置で重ねる画像や動画などの中身は
position: absolute; inset: 0;（またはtop: 0; left: 0; width: 100%; height: 100%;）で親要素いっぱいに重ねて配置します。
CSSの1行だけで完結する
aspect-ratioと違い、padding-topは親要素・子要素それぞれに複数のプロパティを指定する必要があり、記述量も多くなります。とはいえ、aspect-ratioに対応していない古いブラウザへの配慮が必要な場面や、既存の古いコードベースを踏襲する場面では、今でも実用的なテクニックです。基本的には新規実装であればaspect-ratioを優先し、幅広いブラウザ対応が必要な場合の代替手段としてpadding-topを覚えておくとよいでしょう。
各機能の説明
-
双方向計算幅と高さから比率を算出、逆に比率と片方の数値からもう片方の数値を計算できます。
-
よく使う比率のプリセット早見表から16:9、4:3、1:1、21:9など主要な比率をワンクリックで適用できます。
-
端数処理の切り替え比率から数値を計算する際の丸め方を、四捨五入・切り捨て・切り上げから選べます。
-
視覚的なプレビュー入力した比率がどんな形になるか、長方形のプレビューでひと目で確認できます。
-
CSSコードのコピーaspect-ratioとpadding-top（従来手法）、両方のCSSコードをワンクリックでコピーできます。
-
主要比率の早見表SNSや動画でよく使う比率と、padding-top用のパーセント換算値を一覧で確認できます。
こんなときに使う
-
動画・画像の書き出しサイズを揃えたいとき16:9や4:3など、目的の比率に合わせた幅・高さの数値をすぐに逆算できます。
-
SNS投稿用の画像サイズを決めたいときInstagramの4:5・1:1、YouTubeサムネイルの16:9などに合わせたサイズ確認に使えます。
-
CSSで比率固定ボックスを実装したいときaspect-ratioやpadding-topのコードをそのままコピーしてコーディングに使えます。
-
デザインカンプから数値を逆算したいときFigma等で決めた比率をもとに、別の辺の数値を素早く計算できます。
よくある質問
-
このツールはどのように比率を計算していますか？
入力された幅と高さの最大公約数を求め、それぞれを割ることで最も簡単な整数比（例：1920×1080→16:9）に変換して表示しています。
-
入力した数値はサーバーに送信されますか？
いいえ、送信されません。すべての計算はブラウザ内のJavaScriptで完結しており、外部サーバーへ数値が送られることはありません。
-
「端数処理」の四捨五入・切り捨て・切り上げはどう違いますか？
比率から数値を計算した際に小数点以下が出る場合の扱いです。四捨五入は0.5以上を繰り上げ、切り捨ては常に小数点以下を削除、切り上げは常に整数へ繰り上げます。
-
aspect-ratioとpadding-topはどちらを使えばいいですか？
aspect-ratioはモダンブラウザ向けの簡潔な指定方法です。古いブラウザにも対応させたい場合はpadding-top（従来手法）を併用してください。
-
16:9以外にどんな比率のプリセットがありますか？
16:9・4:3・1:1・21:9・3:2・9:16・4:5を早見表からワンクリックで適用できるほか、さらに多くの比率とパーセント値を一覧で確認できます。