BLOG

aspect-ratio完全ガイド

2026.06.15 BLOG

aspect-ratioを使うと、画像、動画、カード、埋め込みコンテンツなどの縦横比をCSSだけで安定させられます。従来のpaddingを使った比率維持より記述が短く、レスポンシブ対応も分かりやすくなります。

ただし、幅と高さを両方固定している、画像のobject-fitがない、Grid内の最小サイズに押し広げられるなど、「指定したのに比率が崩れる」ケースもあります。この記事では基本構文から実務パターン、よくある失敗までまとめます。

aspect-ratioとは

aspect-ratioは、要素の望ましい横幅と高さの比率を指定するCSSプロパティです。16 / 9なら横16に対して縦9、1 / 1なら正方形になります。

.thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
}

重要なのは、幅か高さの少なくとも一方が自動サイズであることです。両方へ確定値を指定すると、その寸法が優先され、比率はサイズ計算へ影響しません。

/* aspect-ratioが高さを計算する */
.box {
  width: 480px;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* 幅と高さが固定されているため比率は効かない */
.box-fixed {
  width: 480px;
  height: 480px;
  aspect-ratio: 16 / 9;
}

基本構文

.square     { aspect-ratio: 1 / 1; }
.video      { aspect-ratio: 16 / 9; }
.portrait   { aspect-ratio: 3 / 4; }
.widescreen { aspect-ratio: 21 / 9; }

/* 1と同じ意味 */
.square-short { aspect-ratio: 1; }

比率は整数である必要はなく、1.5のような数値も指定できます。ただし、デザイン上の意図が読み取りやすい3 / 2のような表記がおすすめです。

実装例1：サムネイル画像を16:9に統一する

記事一覧では、元画像の寸法が異なっても表示領域を統一したい場面が多くあります。aspect-ratioとobject-fit: coverを組み合わせます。

<article class="post-card">
  <img class="post-card-image" src="thumbnail.jpg" alt="記事の内容を表す説明">
  <h2>記事タイトル</h2>
</article>

.post-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

aspect-ratioは画像枠の比率、object-fit: coverは枠内での画像の収まり方を担当します。人物や商品を切りたくない場合は、object-positionも調整します。

.post-card-image {
  object-position: 50% 30%;
}

実装例2：レスポンシブ動画

YouTubeなどのiframeは、親要素へ比率を持たせて中身を全面配置すると安定します。

<div class="video-frame">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="動画タイトル"
    allowfullscreen
  ></iframe>
</div>

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

実装例3：正方形プロフィール画像

.avatar {
  width: clamp(64px, 10vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

円形表示でも、元になる画像ボックスは正方形です。幅だけをレスポンシブに決めれば、高さは自動で追従します。

実装例4：カード全体の比率を保つ

画像だけでなく、通常のdivやカードにも使用できます。ただし、内部テキストが増えると最小サイズによって高さが広がることがあります。

.visual-card {
  display: grid;
  align-content: end;
  width: min(100%, 480px);
  aspect-ratio: 4 / 3;
  padding: 24px;
  background: #ffd329;
}

固定比率を絶対条件にして内容を切りたくない場合は、文字量を制限するか、overflowの扱いを明示します。本文量が可変なら、画像部分だけへ比率を持たせる方が安全です。

実装例5：CSS変数で比率を切り替える

.media {
  aspect-ratio: var(--media-ratio, 16 / 9);
}

.media--square {
  --media-ratio: 1 / 1;
}

.media--portrait {
  --media-ratio: 3 / 4;
}

共通コンポーネントへ比率を直接上書きするより、カスタムプロパティを入口にすると用途が見えやすくなります。

実装例6：画面幅で比率を変える

.hero-media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .hero-media {
    aspect-ratio: 16 / 9;
  }
}

モバイルでは縦長、PCでは横長にする構成です。ただし、画像内に文字を焼き込む場合は、切り抜かれても重要情報が残る中央セーフエリアを設計してください。

実装例7：autoと比率を併記する

画像など自然な縦横比を持つ置換要素では、auto 3 / 2のように指定できます。画像の読み込み前は指定比率を使い、読み込み後は画像本来の比率へ切り替わります。

img {
  width: 100%;
  height: auto;
  aspect-ratio: auto 3 / 2;
}

レイアウトシフトを減らしたいだけなら、HTMLのwidthとheight属性も省略しないことが重要です。ブラウザは属性値から画像の比率を事前計算できます。

<img
  src="photo.jpg"
  width="1600"
  height="900"
  alt="写真の説明"
>

実装例8：Gridカードで比率を統一する

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}

.card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Gridの列幅が変化しても、各画像の高さが同じ比率で再計算されるため、一覧の行が揃います。

よくある失敗

widthとheightを両方固定する：確定寸法が優先され、比率がサイズ計算に使われません。
画像へobject-fitを指定しない：枠は揃っても画像が不自然に引き伸ばされる場合があります。
長い内容を固定比率へ詰め込む：テキストがはみ出すか、最小サイズによって比率より高くなります。
max-heightやmin-heightと競合する：制約条件が比率から計算したサイズを上書きします。
インライン要素へそのまま指定する：aspect-ratioは通常のインラインボックスには適用されません。
画像内テキストを端へ置く：レスポンシブなobject-fit: coverで重要情報が切れます。

旧paddingハックから置き換える

/* 旧来の方法 */
.video-old {
  position: relative;
  padding-top: 56.25%;
}
.video-old iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 現在の方法 */
.video {
  aspect-ratio: 16 / 9;
}
.video iframe {
  width: 100%;
  height: 100%;
}

既存ブラウザへの特別な対応が不要な案件では、基本的にaspect-ratioへ置き換えられます。CSSが短くなり、意図も明確です。

実務チェックリスト

幅か高さのどちらかをautoにしているか
画像にはobject-fitを指定したか
HTML画像のwidth・height属性を残しているか
長いテキストが入った場合も確認したか
Grid・Flexboxの最小サイズ制約を確認したか
スマホの中央トリミングで重要部分が切れないか

まとめ

aspect-ratioは、レスポンシブな画像や動画の比率を簡潔に管理できる標準的なCSSです。まず幅を決め、比率から高さを計算させる考え方を押さえれば、カード、プロフィール画像、動画、ヒーローまで幅広く使えます。

比率を指定するだけで終わらず、画像にはobject-fit、可変テキストには内容量への配慮、画像要素にはHTMLの寸法属性を組み合わせると、崩れにくくレイアウトシフトも少ない実装になります。

参考資料

STEP BACK