アスペクト比の計算
元の幅と高さを入力し、目標の幅か高さのどちらかを書き換えると、もう一方が同じ比率で自動計算されます。比率・比例サイズ・小数比率・代替パディングと、そのまま貼れる CSS が出力されます。
ブラウザ内でローカルに実行 ·
16:9
元の幅と高さを入力し、目標の幅か高さのどちらかを書き換えると、もう一方が同じ比率で自動計算されます。比率・比例サイズ・小数比率・代替パディングと、そのまま貼れる CSS が出力されます。
ブラウザ内でローカルに実行幅と高さ（ピクセル）を入力すると、約分した比率・同じ比率の別サイズ・形を保つ要素に貼れる CSS の 3 つが同時に得られます。数値だけを計算するページで、画像の読み込み・縮小・アップロードは行いません。
入力中も常に再計算されます。元の幅と高さが比率を決め、目標の幅か高さのどちらかを書き換えると、もう一方が自動で計算されるため、入力の途中でも比率は崩れません。
約分した比率は、元の寸法を最大公約数で割ったものです。1920 × 1080 は 16:9、1366 × 768 は 683:384 になります（後者はこれ以上約分できないためです）。比例サイズは目標の値を整数ピクセルに丸めたもの、小数比率は幅 ÷ 高さを 6 桁で表した値（16:9 なら 1.777778）です。代替パディングは高さ ÷ 幅をパーセントにした値（16:9 なら 56.2500 %）で、パーセントの padding を使う従来の手法で必要になる数値です。
「CSS をコピー」は aspect-ratio: 16 / 9;（形の指定）、width: 100%;（要素を列いっぱいに広げる）、コメント付きの padding-top 行（代替手段）を出力します。aspect-ratio プロパティに対応しないエンジンでも同じスタイルシートを使う場合は padding 行を残し、対応するブラウザーだけが対象ならコメントごと削除します。スニペットは約分後の値を使うため、683:384 のような比率は計算どおりに出力されます。
比率の組には整数だけを使います。小数の幅や高さは最大公約数を求める前に最も近い整数へ丸められますが、小数比率とパディングの割合は入力した数値をそのまま使います。プリセットも同じように約分されるため、21:9 は 7:3 と表示されます（同じ比率の最小形です）。元の幅と高さはどちらも 0 より大きい必要があり、空欄・0・負の値の場合はステータス行に表示され、直前の有効な結果が残ります。
比率は常に最小形で表示されるためです。21 と 9 はどちらも 3 で割り切れるので、21:9 は 7:3 になります。比率としては同じで、aspect-ratio: 7 / 3 と aspect-ratio: 21 / 9 は同じボックスを計算します。
どちらでも構いません。幅を編集すると高さが、高さを編集すると幅が再計算されます。レイアウト上で固定されている側（固定幅のカラムや 600 px の高さなど）を編集するのが実用的です。
コメント行として出力されるので残しても負担はありません。aspect-ratio は 1 つのプロパティで形を指定でき、パーセントの padding はこれに対応しないエンジン向けの従来手法です。対象ブラウザーがすべて対応している場合だけコメントを削除してください。
入力できます。約分した組は丸めた整数から計算されるため、1920.5 × 1080.25 は 1921:1080 と表示されます。一方、小数比率（1.777829）とパディングの割合は丸める前の数値を使います。
いいえ。計算するのは数値と CSS だけで、ファイルは開きません。ピクセル自体を変更するときは画像リサイズツールを使い、このページは表示するコンテナ側に使ってください。