アスペクト比計算

アスペクト比計算

サイズを比率に簡約、足りない幅や高さを算出、比率を枠に収める — CSSのaspect-ratio出力つきで3方向すべてに対応します。

アスペクト比計算

サイズを比率に簡約、足りない幅や高さを算出、比率を枠に収める — CSSのaspect-ratio出力つきで3方向すべてに対応します。

アスペクト比計算はブラウザー内で完結します。寸法は端末内で処理され、アップロードされることはありません。

アスペクト比計算について

アスペクト比計算は、問題がやってくる3つの方向すべてで働きます。幅と高さを与えれば最大公約数で比率を簡約し — そして重要なことに、ニアミスも認識します：1366×768は役に立たない683:384に簡約されますが、計算は「実質16:9」とも報告します。それこそ欲しかった答えです。比率と一方の寸法を与えれば、他方を整数ピクセルで解きます。比率と入れ物を与えれば、内側に収まる最大サイズを返します。どの方向でも、その比率の標準サイズ（16:9なら1280×720から3840×2160まで）と、コピーしてすぐ使えるCSS — モダンなaspect-ratioプロパティと、旧来のレスポンシブ埋め込みパターンのpadding-topパーセント — が得られます。

機能

寸法 → 正確な比率と最も近い一般的な比率

比率＋一方の寸法 → 他方を整数ピクセルで

比率＋入れ物 → 内側に収まる最大サイズ

16:9から2.39:1アナモルフィックまでのプリセット

偶数の高さを保証した標準サイズ一覧

CSSのaspect-ratioプロパティとpadding-hackの割合

よくあるエラーとトラブルシューティング

1366×768が16:9でなく683:384に簡約される。 — 683:384が正確な答えです — その解像度は本当に16:9ではありません。「実質16:9」の行が実用的な答えを与えます。両方が表示されるのは両方が真実だからです。

算出された寸法が奇数で動画エンコーダーに拒否される。 — H.264などは偶数の寸法を要求します。高さを偶数に丸めた標準サイズ一覧を使うか、入力を1ピクセルずらしてください。

16:9のプレーヤーで4:3の動画に黒帯が出る。 — それが正しい動作です — 4:3を16:9に収めれば左右に帯が残ります。帯をなくすには内容を切り抜くしかありません。

よくある質問

指定した幅での16:9の解像度は？

幅に9/16を掛けます：1280→720、1920→1080、2560→1440、3840→2160。この計算はどの幅・高さでも解き、標準サイズも並べて表示します。

CSSで要素のアスペクト比を保つには？

モダンな方法は1行です：aspect-ratio: 16 / 9。旧来のパターンはコンテナにpadding-top: 56.25%を与え、中身を絶対配置します。この計算はあなたの比率に合わせて両方を出力します。

ピクセルが違うのにモニターが16:9を名乗るのはなぜ？

1366×768のようなパネルは1%以内で16:9に近似します — マーケティングと全画面動画には十分です。この計算は正確な比率と最も近い名前つきの比率を示すので、ずれが混乱でなく見えるものになります。

SNSプラットフォームはどの比率を求めますか？

フィード動画は1:1か4:5、ストーリーズやショートは9:16、横長のアップロードは16:9、シネマ系の映像は21:9や2.39:1です。プリセット比率と寸法算出モードで正確なピクセル目標が得られます。