CSSで簡単！aspect-ratioプロパティで画像や動画の比率を保つ方法とは？

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

突然ですが、Web制作をしていてこんな悩みはありませんか？

「画像が引き伸ばされてレイアウトが崩れてしまう…」
「YouTubeの埋め込みがうまくレスポンシブにならない…」

そんな経験はありませんか？

Webデザインでは、縦横の比率（アスペクト比）を維持することが美しい見た目やユーザー体験に直結します。従来はpadding-topテクニックやJavaScriptを駆使する必要がありましたが、いまやCSSのaspect-ratioプロパティを使えば一発解決！

この記事では、画像や動画、iframeの比率をCSSだけで簡単に保つ方法を、初心者にもわかりやすく丁寧に解説します。
実際に使えるコード付きなので、コピペで即活用できますよ！

aspect-ratioとは？

aspect-ratioとは、要素の縦横比（アスペクト比）をCSSで指定できるプロパティです。
今まではpaddingやJavaScriptを使ったりと、手間がかかっていましたが、このプロパティのおかげでシンプルに書けるようになりました。

基本構文

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

画像にaspect-ratioを使う

画像の比率を保ちつつ、親要素の幅に合わせてリサイズさせるときに便利です。
下記のコードは16:9の比率を維持したまま、レスポンシブに対応する例です。

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

動画やiframeにaspect-ratioを使う

YouTubeなどの埋め込み動画にも活躍します。従来の「padding-topトリック」は不要になります。

<div class="video-wrapper">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
  ></iframe>
</div>

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

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

ブラウザ対応状況と注意点

2025年現在、Chrome・Edge・Firefox・Safariはすべて対応済みです。
しかし、Internet Explorerは非対応のため、必要に応じてフォールバックを併用しましょう。

.fallback-box {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

.fallback-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

この方法とaspect-ratioを併用して、互換性の高い設計にするのもアリです。

まとめ：aspect-ratioで効率的なレイアウトを