アスペクト比計算
サイズを比率に簡約、足りない幅や高さを算出、比率を枠に収める — CSSのaspect-ratio出力つきで3方向すべてに対応します。
アスペクト比計算はブラウザー内で完結します。寸法は端末内で処理され、アップロードされることはありません。
CSS clamp()計算を開く
アスペクト比計算 について
アスペクト比計算は、問題がやってくる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の割合
アスペクト比計算 の使い方
- 方向を選択：サイズ→比率、足りない寸法、枠に収める
- 分かっている値を入力
- 結果とその比率の標準サイズを確認
- レイアウトに使うならCSSをコピー
例
入力
16:9, width 1000
出力
Height 563 px · CSS: aspect-ratio: 16 / 9; · padding hack 56.25%
56.25%は9÷16 — レスポンシブ動画の古典的な数字です。
よくあるエラーとトラブルシューティング
- 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です。プリセット比率と寸法算出モードで正確なピクセル目標が得られます。
関連ツール
すべての ArrayKit ツール