このツールについて
幅と高さを入力すると、約分された比率、小数値、そのまま使える `aspect-ratio` 宣言が得られます。16:9、4:3、21:9 などの標準比に一致する場合はその名称も表示されます。逆モードでは比率を固定して片方の辺を入力すればもう一方が求まるため、画像や動画コンテナを比率どおりに拡縮する場面で役立ちます。
CSS / FRONTEND · ブラウザ内で処理
アスペクト比計算
幅と高さから最簡比を求め、比率から不足する辺も算出。
最大公約数で約分し、16:9、4:3、1:1 などの標準比と照合します。
計算モード
計算モード
寸法から比率
結果
比率16:9
小数値1.7778
標準比率16:9
CSS 宣言
aspect-ratio: 16 / 9;
操作手順
- 元の幅と高さを入力します。
- 約分された比率と aspect-ratio 宣言を確認します。
- 比率どおりに拡縮する場合は、片方の辺から他方を求めます。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- aspect-ratio プロパティと padding ハックの違いは。
- aspect-ratio はネイティブのプロパティで、`aspect-ratio: 16 / 9` と書くだけで意図が明確に伝わり、ラッパー要素も不要です。padding-top にパーセントを指定する従来の手法は、このプロパティが普及する前の代替策であり、現行ブラウザでは不要です。
- 比率が不自然な値になるのはなぜですか。
- 約分は最大公約数で行うため、1920×1080 は 16:9 になりますが、1921×1080 のように割り切れない寸法では大きな数値の組になります。多くの場合は元の寸法が 1〜2 ピクセルずれていることを示すので、小数値を見てどの標準比に最も近いか判断してください。