BLOG

aspect-ratioが効かない原因5選

2026.06.28 BLOG

aspect-ratioは、画像、動画、カード、サムネイルの比率を保つために使える便利なCSSです。ただし、指定しているのに効かない、思った比率にならない、画像だけ崩れる、というケースもあります。

この記事では、aspect-ratioが効かない原因を5つに分けて、画像・iframe・カードUIでの実装パターンまで整理します。

aspect-ratioの基本

aspect-ratio: 16 / 9;は、要素の幅と高さの比率を16:9に保つ指定です。幅または高さのどちらかが決まっていると、もう片方のサイズ計算に使われます。

<section class="ratio-demo">
  <article class="card">
    <img
      src="https://images.unsplash.com/photo-1546519638-68e109498ffc?auto=format&fit=crop&w=900&q=80"
      alt="バスケットボール"
    >
    <h2>16:9のカード画像</h2>
  </article>

  <article class="card">
    <div class="video-frame">
      <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Demo video"></iframe>
    </div>
    <h2>動画埋め込みの枠</h2>
  </article>
</section>

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

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

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

.card {
  min-width: 0;
  border: 2px solid #111;
  background: #fff;
}

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

.video-frame {
  aspect-ratio: 16 / 9;
  background: #111;
}

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

.card h2 {
  margin: 0;
  padding: 16px;
}

原因1：widthもheightも決まっていない

aspect-ratioは比率を指定するだけで、単体で絶対サイズを作る指定ではありません。多くの場合、width: 100%など幅の基準が必要です。

原因2：heightを固定して比率を上書きしている

height: 300pxなどを強く指定すると、比率より固定高さが優先されます。レスポンシブな比率を保ちたい場合は、固定高さを外すか、必要な場面だけに限定します。

原因3：imgの元画像比率とobject-fitを混同している

画像にaspect-ratioを指定しても、画像の中身がきれいにトリミングされるとは限りません。サムネイル用途ではobject-fit: coverをセットで指定します。

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

原因4：iframeの中身に高さを指定していない

YouTubeやCodePenなどの埋め込みでは、外側の枠にaspect-ratioを指定し、内側のiframeにwidth: 100%; height: 100%;を指定します。

原因5：Grid/Flexの中で最小幅に引っ張られている

GridやFlexの中では、長いテキストや画像の最小幅でカードが押し広げられることがあります。必要に応じて、カードや本文にmin-width: 0を入れます。

内部リンク

比率・画像・カード崩れは以下の記事と合わせて確認すると原因を切り分けやすくなります。

CodePen

CodePenでは、上のindex.htmlをHTMLパネルへ、bad.cssとgood.cssをCSSパネルへ貼り替えてください。画像とiframeの違いを見ると、どこに比率を指定すべきか分かります。

まとめ

aspect-ratioが効かないときは、サイズの基準、固定height、画像のobject-fit、iframeの内側サイズ、Grid/Flex内の最小幅を確認します。サムネイルなら、width: 100%、aspect-ratio、object-fit: coverを基本セットにすると安定します。

参考資料

STEP BACK