CSS aspect-ratioの使い方｜画像や動画のアスペクト比を崩さず保つ方法

Webページに画像や動画を配置するとき、「縦横比を崩さず固定したい」「スマホでも16:9をキープしたい」という悩みは誰でも一度は経験するはずです。かつてはCSS中級者でなければ扱えなかった縦横比の固定ですが、現代のCSSには aspect-ratio プロパティが用意されており、たった1行で解決できるようになりました。

この記事では、CSSの aspect-ratio プロパティを使った縦横比の固定方法を、初心者でも理解できるよう基礎から丁寧に解説します。従来の「paddingハック」と呼ばれる古い手法との比較、よく使う比率の早見表、画像・YouTube動画・iframeへの実践的な適用方法まで、体系的に学べます。

また「aspect-ratioを指定したのに効かない」というトラブルの原因と対処法もまとめています。ブラウザ対応状況とフォールバック実装もカバーしているので、実務にすぐ使える知識が身につきます。

記事を読み終えたとき、あなたはレスポンシブデザインにおけるアスペクト比の扱いに完全に自信が持てるようになっているはずです。

この記事の結論

• aspect-ratio: 幅 / 高さ; の1行で縦横比を固定できる
• 古いpaddingハック（padding-top: 56.25%）は不要になった
• object-fit: cover と組み合わせると画像を歪ませずトリミングできる
• モダンブラウザは全対応済み。古い環境向けには @supports でフォールバックを用意すればよい

aspect-ratioとは？縦横比を指定するCSSプロパティ

aspect-ratio はCSS Box Sizing Level 4仕様で定義されたプロパティで、要素の幅と高さの比率（アスペクト比）を指定します。幅が変わると高さが自動で追従し、縦横比を常に一定に保ちます。

構文は非常にシンプルです。

.box {
  aspect-ratio: 16 / 9;
}

上記のように書くと、要素の幅に対して高さが 9/16 = 56.25% の比率に自動調整されます。スラッシュ（/）の前が幅の比率、後ろが高さの比率です。

aspect-ratioに指定できる値

aspect-ratio プロパティには次のような値を指定できます。

最も使用頻度が高いのは 16 / 9 や 4 / 3 のような整数比です。スラッシュを省略して aspect-ratio: 1 と書くと正方形になります。

aspect-ratioが縦横比を保つ仕組み

aspect-ratio が指定されている要素で、片方の寸法（例えば width）が決まると、ブラウザはもう片方の寸法を自動計算します。親要素の幅いっぱいに広がる div に対して aspect-ratio: 16 / 9 を指定した場合、親幅が 1200px なら高さは自動で 675px（= 1200 × 9/16）になります。親幅が 600px に縮んでも高さは 337.5px に追従します。

この仕組みにより、レスポンシブデザインで縦横比を保ったまま要素をスケーリングできます。従来は複雑なCSSハックが必要だったこの処理が、プロパティ1つで実現できるようになりました。

aspect-ratio が機能するためには、幅か高さのどちらか片方が確定している必要があります。両方が auto の場合はアスペクト比の計算ができません。ただし実際には多くの場合、ブロック要素は親幅に自動で広がるため、問題なく機能します。

.video-wrapper {
  width: 100%;          /* 幅は親要素いっぱい */
  aspect-ratio: 16 / 9; /* 高さは自動計算 */
  background: #000;
}

上記のように指定すれば、あとはウィンドウ幅が何pxになっても常に16:9の比率を保ちます。

従来のpaddingハックとの比較

aspect-ratio が登場する以前、縦横比を固定するための定番テクニックが「paddingハック（padding-top ハック）」でした。これは padding-top または padding-bottom にパーセント値を指定すると、親要素の幅に対する割合で計算されるという仕様を利用したものです。

16:9の比率を実現するには 9 ÷ 16 = 0.5625、つまり 56.25% をpaddingに指定します。高さを0にして、paddingで「見かけの高さ」を作り出す、というトリッキーな手法です。

paddingハックの実装

/* ■ paddingハック（古い手法） */

/* 外側のラッパー */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 ÷ 16 × 100 = 56.25% */
  height: 0;           /* 高さは0にする */
  overflow: hidden;
}

/* 内側の要素を絶対配置で引き伸ばす */
.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

このコードを見ただけで「ハック」と呼ばれる理由がわかります。height: 0 にしたうえで padding-top で疑似的に高さを作り出し、子要素を position: absolute で配置する。直感的でなく、理解するのに時間がかかるコードです。

aspect-ratioを使った実装

/* ■ aspect-ratioを使った現代的な手法 */

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

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

コード量が半分以下になり、意図も一目でわかります。position: absolute や height: 0 といったトリックが一切不要です。

2つの手法の比較表

現代のWeb開発では aspect-ratio を第一選択とし、古いブラウザ向けにのみpaddingハックをフォールバックとして提供するのがベストプラクティスです。paddingハックの計算式は「高さ ÷ 幅 × 100」で求めます。4:3なら 3 ÷ 4 × 100 = 75%、正方形なら 100% です。

aspect-ratioの書き方とよく使う比率の早見表

aspect-ratio の基本構文を改めて確認し、実際によく使う比率をまとめます。

基本構文

/* 基本構文 */
.element {
  aspect-ratio: <width-ratio> / <height-ratio>;
}

/* 具体例 */
.widescreen {
  aspect-ratio: 16 / 9;  /* HD動画・YouTube標準比率 */
}

.square {
  aspect-ratio: 1 / 1;   /* 正方形（1と書いても同じ） */
}

.portrait {
  aspect-ratio: 3 / 4;   /* 縦長・スマホ向け写真 */
}

よく使う比率の早見表

プロジェクトでよく登場するアスペクト比と用途をまとめました。paddingハックを使う場合の計算値も併記しています。

実際のコード例：カードコンポーネントへの適用

ブログカードや商品カードのサムネイル画像に適用する例を示します。

/* カードコンポーネントのサムネイル */
.card__thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 歪みなくトリミング */
}

複数の比率を動的に切り替えたい場合は、CSS カスタムプロパティ（変数）と組み合わせると便利です。

:root {
  --ratio-16-9: 16 / 9;
  --ratio-4-3:  4 / 3;
  --ratio-square: 1;
}

.thumbnail {
  aspect-ratio: var(--ratio-16-9); /* 変数で切り替え可能 */
}

.thumbnail--square {
  aspect-ratio: var(--ratio-square);
}

小数での指定

aspect-ratio には整数だけでなく小数も使えます。ただし比率を整数で明示した方が可読性が高く、メンテナンスしやすいため、通常は整数比を推奨します。

/* 小数でも指定可能（非推奨：可読性が落ちる） */
.box {
  aspect-ratio: 1.7778; /* 16/9 ≈ 1.7778 */
}

/* こちらの方が明確 */
.box {
  aspect-ratio: 16 / 9;
}

画像への適用とobject-fitの併用

画像要素（img）に aspect-ratio を適用するとき、そのままでは画像が引き伸ばされて歪む場合があります。これを防ぐために object-fit プロパティを組み合わせます。

aspect-ratioだけでは画像が歪む

img 要素は置換要素（replaced element）と呼ばれ、CSSで縦横比を強制すると元の比率を無視して引き伸ばされます。例えば縦長の写真に aspect-ratio: 16 / 9 を指定すると、横に引き伸ばされた不自然な表示になります。

/* NG：画像が歪む */
img {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* object-fitがないので元比率と違う場合に歪む */
}

object-fit: coverで歪みなくトリミング

object-fit: cover を追加すると、アスペクト比を維持したまま指定した領域を埋めるようにトリミングされます。中央部分が表示される挙動で、SNSのサムネイルやカード画像に最適です。

/* OK：歪まずトリミング */
img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;    /* 比率を保ってトリミング */
  object-position: center center; /* トリミング基点（デフォルトは中央） */
}

object-fitの値比較

実践例：ブログカードのサムネイル実装

横並びのカードグリッドで、異なる縦横比の画像を統一したサイズで表示する典型的なケースです。

/* カードグリッド */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* カード */
.card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* サムネイル領域 */
.card__image-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* 画像本体 */
.card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

/* ホバーでズームイン */
.card:hover .card__image-wrapper img {
  transform: scale(1.05);
}

<!-- HTML構造 -->
<div class="card-grid">
  <article class="card">
    <div class="card__image-wrapper">
      <img src="thumbnail.jpg" alt="記事サムネイル">
    </div>
    <div class="card__body">
      <h3>記事タイトル</h3>
    </div>
  </article>
</div>

aspect-ratio を img 直接ではなくラッパー div に指定し、img を width: 100%; height: 100%; object-fit: cover; で引き伸ばすパターンも有効です。特に img にアニメーションを加えたい場合や、JavaScriptで画像をlazy loadする際に src 属性を動的に差し込む場合はラッパーを使う方法が安定します。

背景画像への応用

背景画像（background-image）の場合は object-fit は使えませんが、background-size: cover と組み合わせることで同様の効果が得られます。

.hero {
  width: 100%;
  aspect-ratio: 21 / 9;  /* シネマスコープ比率 */
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
}

YouTube動画・iframeをレスポンシブにする

YouTubeやVimeoの動画をWebページに埋め込む際、公式の埋め込みコードは width と height が固定値で提供されます。このままではスマートフォンで表示したときに横にはみ出してしまいます。aspect-ratio を使えばこの問題をシンプルに解決できます。

YouTubeの埋め込みコード（デフォルト）

YouTubeが生成する埋め込みコードは以下のように固定サイズが設定されています。

<!-- YouTubeのデフォルト埋め込みコード（固定サイズ） -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/xxxxxxxxxxx"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

このままでは width="560" が固定されるため、モバイル表示で画面から飛び出します。

aspect-ratioを使ったレスポンシブ対応（推奨）

aspect-ratio を使えば、ラッパー不要でiframe自体をレスポンシブにできます。

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

<!-- widthとheightをHTMLから削除してCSSで制御 -->
<iframe class="youtube-embed"
  src="https://www.youtube.com/embed/xxxxxxxxxxx"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

HTMLの width 属性と height 属性を削除し、CSSで width: 100%; aspect-ratio: 16 / 9; を指定するだけです。ラッパーdivが不要になり、コードがすっきりします。

paddingハックを使った従来のレスポンシブ対応（参考）

古いブラウザもサポートする必要がある場合のpaddingハックによる実装も参考として掲載します。

/* paddingハックによるレスポンシブiframe（古い手法） */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 ÷ 16 × 100 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

<!-- paddingハック用のHTML -->
<div class="video-wrapper">
  <iframe
    src="https://www.youtube.com/embed/xxxxxxxxxxx"
    title="YouTube video player"
    allowfullscreen>
  </iframe>
</div>

複数の埋め込みに対応するユーティリティクラス

ページ内に複数の動画を埋め込む場合は、比率別のユーティリティクラスを用意しておくと便利です。

/* 比率別ユーティリティクラス */
.embed {
  display: block;
  width: 100%;
}

.embed--16-9 { aspect-ratio: 16 / 9; }
.embed--4-3  { aspect-ratio: 4 / 3; }
.embed--1-1  { aspect-ratio: 1 / 1; }
.embed--21-9 { aspect-ratio: 21 / 9; }

<!-- 使い方 -->
<iframe class="embed embed--16-9"
  src="https://www.youtube.com/embed/xxxxxxxxxxx"
  allowfullscreen>
</iframe>

Google マップの埋め込みにも応用できる

YouTubeと同じ手法は、Google マップやCodePenなど他のiframe埋め込みにも使えます。Google マップは縦横比が16:9よりも正方形に近い表示が好まれることが多いため、aspect-ratio: 4 / 3 や aspect-ratio: 1 / 1 を試してみてください。

.map-embed {
  width: 100%;
  aspect-ratio: 4 / 3; /* マップは4:3が見やすいことが多い */
  border: 0;
}

width・height・min-/max-との関係とautoの挙動

aspect-ratio と他の寸法プロパティを組み合わせるとき、どちらが優先されるかを正確に理解しておくことが重要です。誤った組み合わせをすると、アスペクト比が期待通りに機能しないことがあります。

aspect-ratioと明示的なwidth/heightの優先順位

width と height の両方が明示的に指定されている場合、aspect-ratio は無視されます。アスペクト比が機能するためには、片方の寸法がauto（未指定）または親要素依存である必要があります。

/* NG: 両方指定するとaspect-ratioは無視される */
.box {
  width: 300px;
  height: 200px;       /* 明示的に指定されている */
  aspect-ratio: 16 / 9; /* 無視される */
}

/* OK: 片方だけ指定する */
.box {
  width: 300px;
  /* height は未指定 → aspect-ratioで自動計算 */
  aspect-ratio: 16 / 9; /* 高さ = 300 × 9/16 = 168.75px */
}

min-width・max-widthとの組み合わせ

min-width や max-width と組み合わせることで、アスペクト比を保ちつつ寸法の上限・下限を設定できます。これはレスポンシブデザインでよく使われるパターンです。

.thumbnail {
  width: 100%;
  max-width: 640px;     /* 最大幅を制限 */
  aspect-ratio: 16 / 9; /* 比率は維持 */
  margin: 0 auto;       /* 中央寄せ */
  object-fit: cover;
}

.avatar {
  width: 80px;
  min-width: 40px;      /* 小さくなりすぎない */
  max-width: 120px;     /* 大きくなりすぎない */
  aspect-ratio: 1;      /* 正方形を維持 */
  border-radius: 50%;   /* 丸いアバター */
  object-fit: cover;
}

aspect-ratio: auto の挙動

aspect-ratio: auto は、要素が固有のアスペクト比を持つ場合にそれを使用するよう指示します。img 要素は width 属性と height 属性から固有の比率を持つので、auto を指定すると元の比率が使われます。

/* img要素の固有比率を活かす */
img {
  width: 100%;
  aspect-ratio: auto; /* width/height属性から比率を導出 */
  /* height は自動計算される */
}

auto と比率を組み合わせた aspect-ratio: auto 16 / 9 という記法もあります。固有の比率があればそちらを優先し、ない場合は 16 / 9 を使うという意味になります。ただし、この記法は比較的新しいため、ブラウザ対応状況を確認してから使用してください。

コンテンツ量によるアスペクト比の崩れ

aspect-ratio を指定した要素の中にテキストや子要素を大量に配置すると、コンテンツが aspect-ratio で決まる高さをはみ出す場合があります。このとき、デフォルトでは要素が縦に広がってしまいアスペクト比が崩れます。

/* コンテンツ量で崩れる例 */
.box {
  width: 300px;
  aspect-ratio: 1;     /* 正方形を意図 */
  /* 大量のテキストを入れると縦に広がる */
}

この問題に対処するには、overflow: hidden を指定してはみ出しを隠すか、min-height で最小高さを確保しつつ overflow: auto でスクロールを許可するかを選択します。

/* 対処法1: はみ出しを隠す */
.fixed-box {
  width: 300px;
  aspect-ratio: 1;
  overflow: hidden; /* はみ出したコンテンツを隠す */
}

/* 対処法2: スクロール可能にする */
.scrollable-box {
  width: 300px;
  aspect-ratio: 1;
  overflow: auto;   /* スクロールバーを出す */
}

/* 対処法3: min-heightでコンテンツを優先 */
.flexible-box {
  width: 300px;
  min-height: 300px;  /* 正方形を最小保証 */
  aspect-ratio: 1;    /* コンテンツが少ない時は正方形 */
}

動画や画像など、コンテンツが固定サイズの場合は問題ありませんが、テキストを含む汎用コンポーネントに aspect-ratio を使う場合は overflow の指定を忘れないようにしましょう。

対応ブラウザとフォールバック

aspect-ratio は2021年前後から主要ブラウザに実装され、現在では実務での採用に支障のない対応状況となっています。

ブラウザ対応状況（2024年時点）

2024年時点でのグローバルブラウザシェアでは、aspect-ratio 対応ブラウザが95%以上を占めています。IE11のサポートが終了（2022年6月）し、多くの企業がIEサポートを打ち切った現在、新規プロジェクトでは aspect-ratio を積極的に採用して問題ありません。

@supportsを使ったフォールバック

古いSafariやIE11もサポートする必要がある場合は、@supports アットルールを使ってフォールバックを提供できます。@supports に対応しているブラウザは aspect-ratio も対応しているため、このアプローチは確実です。

/* デフォルト：paddingハック（古い環境向け） */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9のフォールバック */
  height: 0;
  overflow: hidden;
}

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

/* aspect-ratioが使えるなら上書き */
@supports (aspect-ratio: 1) {
  .video-wrapper {
    padding-top: 0;    /* paddingハックを解除 */
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .video-wrapper iframe {
    position: static;  /* 絶対配置を解除 */
    width: 100%;
    height: 100%;
  }
}

CSSカスタムプロパティを活用したフォールバック

より洗練されたフォールバック手法として、CSSカスタムプロパティを使う方法もあります。

.video-wrapper {
  --aspect-ratio: calc(9 / 16);  /* 56.25% */

  position: relative;
  width: 100%;
  padding-top: calc(var(--aspect-ratio) * 100%);
  height: 0;
  overflow: hidden;
}

@supports (aspect-ratio: 1) {
  .video-wrapper {
    padding-top: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

なお、JavaScriptで CSS.supports('aspect-ratio', '1') を使えば、スクリプトからも対応状況を確認できます。ただし現在の対応状況を考えると、多くの場合は @supports のCSSのみで十分です。

Sass/SCSSでのミックスイン化

SassやSCSSを使っているプロジェクトでは、フォールバック込みのミックスインを作っておくと再利用性が上がります。

// _mixins.scss
@mixin aspect-ratio($width, $height) {
  // フォールバック（paddingハック）
  position: relative;
  width: 100%;
  padding-top: percentage(calc($height / $width));
  height: 0;
  overflow: hidden;

  // aspect-ratio対応ブラウザ向け上書き
  @supports (aspect-ratio: 1) {
    padding-top: 0;
    height: auto;
    aspect-ratio: #{$width} / #{$height};
  }
}

// 使い方
.video {
  @include aspect-ratio(16, 9);
}

.thumbnail {
  @include aspect-ratio(4, 3);
}

aspect-ratioが効かないときの原因と対処法

aspect-ratio を指定したのに期待通りに動かない、というトラブルは初心者がよくぶつかる壁です。原因はほとんどの場合、CSSの他のプロパティとの競合やHTML要素の特性への理解不足です。よくある原因と対処法を解説します。

原因1：heightが明示的に指定されている

最もよくあるミスです。height が明示的に指定されていると、aspect-ratio はその計算結果より明示値が優先されるため、アスペクト比通りにならない場合があります。

/* NG: heightが固定値で指定されている */
.box {
  width: 300px;
  height: 200px;        /* これが優先される */
  aspect-ratio: 1;      /* 正方形にならない */
}

/* OK: heightをautoにする or 削除する */
.box {
  width: 300px;
  height: auto;         /* または省略 */
  aspect-ratio: 1;      /* 正方形になる */
}

原因2：親要素のdisplayがflexまたはgridで、alignが効いている

Flexboxコンテナの子要素は、デフォルトで align-items: stretch が適用されます。このため子要素が縦方向に引き伸ばされ、aspect-ratio の計算が上書きされることがあります。

/* 問題が起きるケース */
.flex-container {
  display: flex;
  /* align-items: stretch がデフォルト */
}

.flex-child {
  width: 200px;
  aspect-ratio: 1;  /* stretchで縦が引き伸ばされ正方形にならない */
}

/* 対処法1: align-selfをautoまたはflex-startにする */
.flex-container {
  display: flex;
  align-items: flex-start; /* stretchを解除 */
}

/* 対処法2: 子要素側でalign-selfを指定 */
.flex-child {
  width: 200px;
  aspect-ratio: 1;
  align-self: flex-start;  /* stretchを解除 */
}

原因3：ブラウザが古くて未対応

Safari 14以前、IE11など古いブラウザでは aspect-ratio が未対応です。ブラウザの開発者ツール（DevTools）でCSSプロパティが打ち消し線で表示されている場合は未対応のサインです。対処法は前のセクションで紹介した @supports によるフォールバックを使用してください。

原因4：widthが確定していない

aspect-ratio は幅か高さのどちらかが確定している必要があります。例えば、インライン要素はデフォルトでコンテンツ幅になりますが、コンテンツがない場合は幅が0になり、aspect-ratio が機能しません。

/* NG: インラインspan要素にそのまま指定 */
span {
  aspect-ratio: 16 / 9;
  /* spanはinline要素でwidthが確定しない */
}

/* OK: ブロック要素に変換するかwidthを指定 */
span {
  display: block;       /* または inline-block */
  width: 200px;         /* 幅を確定させる */
  aspect-ratio: 16 / 9;
}

原因5：min-heightやmax-heightによる上書き

min-height や max-height が設定されていると、aspect-ratio で計算された高さがそれらに制約されます。特に min-height: 100vh のような全画面指定が祖先要素にある場合に注意が必要です。

/* 問題: min-heightがaspect-ratioを上書き */
.hero {
  width: 100%;
  aspect-ratio: 16 / 9;  /* 高さ = 幅 × 9/16 を期待 */
  min-height: 100vh;     /* これが優先され、aspect-ratioは効かない */
}

/* 対処法: min-heightを削除またはunsetで解除 */
.hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: unset;     /* 継承されたmin-heightを解除 */
}

原因6：CSSの詳細度や読み込み順の競合

他のCSSファイルやライブラリが height を指定していて、それが後から読み込まれて上書きしている可能性があります。開発者ツールで対象要素のComputedスタイルを確認し、height がどこで設定されているか追跡してください。

/* リセットCSSが悪さをする例（よくある） */
/* normalize.css などで img に height が設定されているケース */

/* 対処法: !important は最終手段。詳細度を上げるか順番を調整する */
.my-image {
  aspect-ratio: 16 / 9;
  height: auto !important; /* 本当に最後の手段 */
}

デバッグの手順まとめ

• ブラウザのDevToolsで対象要素を選択し、Computedタブで height の実際の値を確認する
• aspect-ratio プロパティが打ち消し線になっていないか確認する（なっていれば未対応か上書きされている）
• 親要素の display が flex/grid の場合、align-items の値を確認する
• 要素の width が実際に確定しているか（0でないか）確認する
• min-height / max-height が設定されていないか確認する

よくある質問（FAQ）

aspect-ratioプロパティはどのブラウザで使えますか？

Chrome 88、Firefox 89、Safari 15、Edge 88以降で対応しています。2021年以降にリリースされたモダンブラウザはほぼすべて対応しており、グローバルシェアで95%以上をカバーしています。IE11と Safari 14以前は未対応のため、これらをサポートする場合はpaddingハックをフォールバックとして@supportsで提供してください。

css aspect-ratioとobject-fitの違いは何ですか？

aspect-ratioは要素の縦横比（幅と高さの比率）を指定するプロパティです。一方object-fitは、img要素やvideo要素などの置換コンテンツが、指定した縦横比の領域にどのように収まるかを制御するプロパティです。aspect-ratioで16:9の領域を作り、object-fit:coverで画像を歪ませずにその領域を埋める、という組み合わせが最も一般的な使い方です。

YouTubeのiframeをcssでレスポンシブにする方法を教えてください

iframeにclass属性を追加し、CSSでwidth: 100%; aspect-ratio: 16 / 9;を指定するだけで対応できます。YouTubeの埋め込みコードにある固定のwidth・height属性はHTML側から削除してください。古いブラウザもサポートする場合は、ラッパーdivにposition: relative; padding-top: 56.25%; height: 0;を指定し、iframe側にposition: absolute; top: 0; left: 0; width: 100%; height: 100%;を設定するpaddingハックが確実です。

画像の縦横比をcssで固定するにはどうすればいいですか？

img要素にwidth: 100%; aspect-ratio: 16 / 9; object-fit: cover;を指定することで縦横比を固定できます。aspect-ratioだけでは画像が歪む場合があるため、必ずobject-fitと組み合わせてください。object-fit: coverは比率を保ちつつ領域全体を埋めるようにトリミングし、object-fit: containは比率を保ちつつ領域内に収める（余白が生まれる）動作をします。

aspect-ratioが効かないとき、まず何を確認すればいいですか？

まずブラウザのDevToolsでComputedスタイルを確認し、height属性が明示的に指定されていないか確認してください。widthとheightが両方指定されている場合はaspect-ratioが無視されます。次にaspect-ratioのプロパティが打ち消し線になっていないか確認します（未対応か上書きされているサイン）。また、親要素がFlexboxの場合はalign-items: stretchが子要素の高さを引き伸ばすため、align-self: flex-startを子要素に指定して解除してください。

関連記事

• 【2026年版】object-fitで画像をトリミング｜cover/contain
• CSSメディアクエリでレスポンシブバナー実装｜完全ガイド
• 【2026年版】CSSメディアクエリ完全ガイド｜レスポンシブ対応の書き方
• ヒーローイメージとは?Webデザイン完全ガイド【2026年版】

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

• 【CSS実装テクニック完全マップ】コピペで使えるWebデザイン実装ガイド総まとめ

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！