CSSアスペクト比

design/css-aspect-ratio

aspect-ratioの代表値、画像・動画での使用例、旧ブラウザ向けpaddingハックをまとめた参照テキストです。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

CSSアスペクト比では、aspect-ratioの代表値、画像・動画での使用例、旧ブラウザ向けpaddingハックをまとめた参照テキストです。
関連する観点として aspect-ratio、アスペクト比、CSS比率を確認し、結果をコピーして別の作業に使えます。

結果

--- aspect-ratio プロパティ ---
aspect-ratio: 16 / 9;   ← ワイドスクリーン
aspect-ratio: 4 / 3;    ← スタンダード
aspect-ratio: 1 / 1;    ← 正方形
aspect-ratio: 3 / 2;    ← 写真
aspect-ratio: 21 / 9;   ← ウルトラワイド
aspect-ratio: 9 / 16;   ← 縦長(スマホ動画)

--- 使用例 ---
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.avatar {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

--- 旧ブラウザ対応 ---
.wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}
.wrapper > * {
  position: absolute;
  inset: 0;
}

使い方

結果欄の先頭で、16 / 9、4 / 3、1 / 1、3 / 2、21 / 9、9 / 16の代表値を確認します。
.video、.card-image、.avatarの例を見て、widthやobject-fitとの組み合わせ方を読みます。
旧ブラウザ対応の.wrapper例では、16:9を padding-top: 56.25% で表す方法を確認します。
Copyボタンで、表示されている参照テキスト全体をコピーします。

入力例・出力例

INPUT

ワイドスクリーンの値

OUTPUT

aspect-ratio: 16 / 9;

INPUT

正方形アバター例

OUTPUT

.avatar { width: 100px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }

INPUT

16:9のpaddingハック

OUTPUT

padding-top: 56.25%;

nodeで 9 / 16 * 100 = 56.25 と検算しました。

よくある利用シーン

動画埋め込みやカード画像の比率CSSをすぐ参照したいとき。
aspect-ratioへ移行する前のpaddingハック式と比較したいとき。
よく使う比率を、生成UIではなく一覧テキストとして控えたいとき。

結果確認のポイント

生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
aspect-ratio、アスペクト比、CSS比率の観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

CSSアスペクト比の主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

FAQ

よくある質問

aspect-ratioプロパティはどう書きますか？

aspect-ratio: 横 / 縦の形式で指定します。例えば aspect-ratio: 16 / 9 とすると、widthが決まれば高さが自動計算されます。auto を指定すると要素本来のサイズ比率が使われます。

aspect-ratioを使うメリットはパディングハックと比べてどう違いますか？

従来のpaddingハック（padding-top: 56.25%）はpositionの入れ子が必要でしたが、aspect-ratioはプロパティ1つで済み、コードが大幅にシンプルになります。また子要素にabsolute配置を強制しなくてよいのも利点です。

aspect-ratioとobject-fitの組み合わせはどう使いますか？

img要素に aspect-ratio: 16 / 9 と object-fit: cover を組み合わせると、画像サイズが変わってもトリミングで16:9を維持できます。このページではよく使うアスペクト比を一覧で確認できます。

CSSアスペクト比

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール

CSSアスペクト比

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール