レスポンシブコンテナに最適な CSS aspect-ratio プロパティを即座に生成。JavaScriptなしで完璧な縦横比を維持できます。
CSSアスペクト比ジェネレーター
:
100%
ライブプレビュー
16 : 9
モダンCSS — aspect-ratio プロパティ
推奨
padding-bottom ハック
旧ブラウザ対応
使い方
aspect-ratio CSSプロパティは、要素のサイズが変わっても横縦比を固定するようブラウザに指示します。width: 100% と組み合わせることで、完全なレスポンシブコンテナを実現できます。
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
padding-bottom ハックは、aspect-ratio が対応していない古いブラウザ向けの代替手法です。パーセンテージ指定のpadding-bottomが常に親要素の横幅を基準に計算されるという仕様を利用しています。
よく使われるアスペクト比
| 比率 | 主な用途 |
|---|---|
| 16:9 | HD動画、YouTube埋め込み、ワイドスクリーン |
| 4:3 | 旧来のテレビ、プレゼンテーション |
| 1:1 | 正方形画像、Instagramポスト |
| 21:9 | 映画的/ウルトラワイドのヒーローバナー |
| 9:16 | スマホ縦動画、ストーリーズ、リール |
| 3:2 | 一眼レフ写真、カードサムネイル |
ブラウザ対応
aspect-ratio は全てのモダンブラウザ（Chrome 88+、Firefox 89+、Safari 15+、Edge 88+）でサポートされています。IE11や旧Safari向けには、上記で生成されたpadding-bottomフォールバックをご利用ください。
関連ツール:
- アスペクト比計算機 — 比率から不明な辺を算出
- CSS Flexboxジェネレーター — Flexboxレイアウトをビジュアルで構築
- 画像リサイザー — アスペクト比を維持したまま画像をリサイズ