カテゴリー
お問い合わせ

【CSS】たった1行でアスペクト比を維持！aspect-ratioを使ったモダンな比率固定テクニック

HTML/CSS
目次

Webサイト制作で、画像やYouTube動画をレスポンシブ対応させる際、「横幅が縮んでも、16:9の比率を崩さずに表示したい」という場面は必ずありますよね。

以前は padding-top を使った複雑な計算（通称：paddingハック）と position: absolute を組み合わせる面倒な手法が主流でしたが、現在のCSSでは aspect-ratio プロパティを使うことで、たった1行で解決できるようになりました！

今回は、aspect-ratio の基本的な使い方を、従来の方法との比較デモを交えてわかりやすく解説します！

デモ動作

See the Pen aspect-ratioで画像や動画の比率を固定する by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>アスペクト比（縦横比）の固定デモ</h2>
  <p class="p-desc">画面幅を変えても、常に「16:9」の比率を保ったまま伸縮します！</p>
  
  <div class="p-demo-box">
    
    <!-- ❌ 従来の方法（paddingハック） -->
    <div class="p-card">
      <h3 class="p-card__title">従来の方法（paddingハック）</h3>
      <div class="c-video-wrapper--old">
        <div class="c-video-content">16:9 (Old Way)</div>
      </div>
    </div>

    <!-- ⭕️ 現代の方法（aspect-ratio） -->
    <div class="p-card">
      <h3 class="p-card__title">現代の方法（aspect-ratio）</h3>
      <div class="c-video-wrapper--new">
        <div class="c-video-content">16:9 (New Way)</div>
      </div>
    </div>

  </div>
</div>

【CSS】

/* ベース装飾 */
.l-wrap { 
  color: #3e3e3e;
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
h2 { 
  font-size: 16px;
  color: #1bb4d4;
  margin-bottom: 16px;
}
.p-desc { 
  font-size: 16px;
  font-weight: bold;
  color: #666;
  line-height: 1.5;
  margin-bottom: 40px;
}

/* レイアウト調整 */
.p-demo-box {
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.p-card__title { 
  font-size: 16px;
  margin-bottom: 16px;
  color: #333;
}

/* 共通の中身（ダミー画像・動画の代わり） */
.c-video-content {
  background-color: #1bb4d4;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}


/* =========================================
   ❌ 1. 従来の方法（paddingハック）
========================================= */
.c-video-wrapper--old {
  position: relative;
  width: 100%;
  /* 16:9の比率を作るために、9 ÷ 16 = 56.25% を指定 */
  padding-top: 56.25%; 
}
/* 中身を絶対配置で親要素にフィットさせる必要がある */
.c-video-wrapper--old .c-video-content {
  position: absolute;
  top: 0;
  left: 0;
}


/* =========================================
   ⭕️ 2. aspect-ratio を使った方法
========================================= */
.c-video-wrapper--new {
  width: 100%;
  
  /* 💡たった1行！ 幅 / 高さ の比率を書くだけ！ */
  aspect-ratio: 16 / 9;
}

コードの解説・仕組み

従来の方法（paddingハック）の辛かった点

/* =========================================
   ❌ 1. 従来の方法（paddingハック）
========================================= */
.c-video-wrapper--old {
  position: relative;
  width: 100%;
  /* 16:9の比率を作るために、9 ÷ 16 = 56.25% を指定 */
  padding-top: 56.25%; 
}
/* 中身を絶対配置で親要素にフィットさせる必要がある */
.c-video-wrapper--old .c-video-content {
  position: absolute;
  top: 0;
  left: 0;
}

今までは要素の比率を固定するために、padding-top（または padding-bottom）にパーセントを指定し、その中に中身を position: absolute で絶対配置するというテクニックが使われていました。 この方法はコードが冗長になるだけでなく、「9 ÷ 16 = 56.25%」といった直感的ではない数値を毎回計算しなければならないというデメリットがありました。

aspect-ratio の圧倒的なシンプルさ

/* =========================================
   ⭕️ 2. aspect-ratio を使った方法
========================================= */
.c-video-wrapper--new {
  width: 100%;
  
  /* 💡たった1行！ 幅 / 高さ の比率を書くだけ！ */
  aspect-ratio: 16 / 9;
}

aspect-ratio を使えば、aspect-ratio: 幅 / 高さ; と記述するだけで完了します！

  • YouTube動画などのワイド画面： aspect-ratio: 16 / 9;
  • 正方形の画像： aspect-ratio: 1 / 1;
  • 一眼レフ写真などの比率： aspect-ratio: 3 / 2;

これだけで要素の高さを自動計算して保ってくれるため、中身を絶対配置（absolute）にする必要もありません。CSSのコード量が圧倒的に減り、メンテナンス性も向上します。

補足：ブラウザ対応状況

より詳しい仕様や最新の対応状況については、以下の公式ドキュメントをご参照ください。

・MDN: aspect-ratio

まとめ

今回は、画像や要素のアスペクト比（縦横比）を簡単に固定できる aspect-ratio プロパティをご紹介しました。

モダンブラウザでは標準機能となり、「paddingハック」に代わって完全にこの手法が主流となっています。 特にYouTubeの埋め込み（iframe）や、ブログ一覧のサムネイル画像などをレスポンシブ対応させる際には必須のテクニックですので、ぜひ積極的に使ってコードをスマートに保ちましょう！

Prev
Next

関連記事