ZeroPlus Media > Web制作 > HTML/CSS > aspect-ratioプロパティとは？使い方について解説

aspect-ratioプロパティとは？使い方について解説

2023/08/30

aspect-ratioプロパティはアスペクト比を保持することができるCSSプロパティで、レスポンシブにとても便利です。
この記事ではaspect-ratioプロパティについて解説します。aspect-ratioプロパティの基本的な使い方や、実装例についてもあわせて解説していきます。

この記事で身につく内容

aspect-ratioプロパティの使い方
aspect-ratioプロパティの使いどころ

aspect-ratio とは
aspect-ratioの使い方
aspect-ratioの具体的な実装例
aspect-ratioプロパティの注意点
まとめ：aspect-ratioプロパティはアスペクト比を保持するのに便利

aspect-ratio とは

aspect-ratioとは、アスペクト比を保持するためのCSSプロパティです。

アスペクト比とは、画像や画面の縦と横の長さの比率（縦横比）のことです。

例えば、640px × 480pxの画像のアスペクト比は「4:3」です。

Webサイトをレスポンシブ対応する際に、このアスペクト比を考慮してコーディングする必要があります。

アスペクト比を考慮しないでコーディングすると、レスポンシブ対応で画面幅を変えた際に、アスペクト比が崩れて正しいレイアウトが表示できないためです。

アスペクト比を考慮してコーディングすることで、画面幅が変わってもアスペクト比を保持したまま、正しいレイアウトを表示できるようになります。

また、aspect-ratioプロパティはレイアウトシフト対策に役立ちます。

レイアウトシフトとは、Webサイトのページが読み込みから表示されるまでの間にレイアウトがずれたり、崩れたりする現象のことです。

レイアウトシフト対策では、従来はHTML上で画像にwidth属性とheight属性を指定していました。

<img src="images/dummy.png" alt="" width=”640” height=”480”>

aspect-ratioプロパティが登場したことによって、CSSでアスペクト比を指定できるようになり、保守性がより高まりました。

aspect-ratioの使い方

aspect-ratioプロパティは、下記のように記述します。

img {
  /* アスペクト比 16:9 */
  aspect-ratio: 16 / 9;
}

この場合、ブラウザのウィンドウの大きさを変更しても、画像のアスペクト比が 16 / 9に保持されます。

また、アスペクト比は割合数値で指定することもできます。

下記の例では、横幅2：縦幅1のアスペクト比を、2 / 1 の計算結果として「2」と記述しています。この記述でも、2 / 1 と指定した時と同じ表示になります。

img {
  /* アスペクト比 2 / 1 →　2 */
  aspect-ratio: 2;
}

画像の横幅が374px、縦幅が196pxの場合は、下記のようになります。

img {
  aspect-ratio: 374 / 196;
}

下記の記述では、例えば画像の横幅が374px、縦幅が196pxの場合です。

この場合、374 / 196とすることでアスペクト比を保持することができます。

  <div class="imgBox">
    <img src="images/dummy.png" alt="">
  </div>

.imgBox {
  max-width: 374px;
  width: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
/* 画像の比率 width / height */
  aspect-ratio: 374 / 196;
}

表示結果

このように、aspect-ratioプロパティは、以下のような形式で指定することができます。

aspect-ratio: 16 / 9; /* 16 : 9の比率  */
aspect-ratio: 374 / 196; /* widthとheightのそのままの数値  */
aspect-ratio: 2;  /* 割合数値  */

どの指定方式を使用するかは、案件のレギュレーションなどによって異なります。複数の指定形式が同じコードファイルの中に混在すると、煩雑になってしまうので注意しましょう。

aspect-ratioのブラウザ対応状況

aspect-ratioプロパティは、Internet Explorerを除く最新バージョンの各ブラウザで使用できます。

aspect-ratioの具体的な実装例

aspect-ratioを使った具体的な実装例は下記になります。

カード型レイアウトでアスペクト比を保持
YouTube動画埋め込み時にアスペクト比を保持
Googleマップ埋め込み時にアスペクト比を保持

カード型レイアウトでアスペクト比を保持

カード型レイアウトでaspect-ratioを使ったやり方です。ニュース一覧やお知らせ一覧で、アイキャッチ付きのカード型アイテムが複数並んでいるパターンのデザインで有効です。

<div class="cards">
  <div class="card">
    <div class="card__img">
      <img src="images/dummy.png" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
  <div class="card">
    <div class="card__img">
      <img src="images/sample2.png" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
  <div class="card">
    <div class="card__img">
      <img src="images/dummy3.jpg" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
</div>

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  /* 調整用 */
  max-width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 40px;

}

.card__img {
  width: 100%;
}

.card__img img {
  /* 画像の比率 width / height */
  aspect-ratio: 374 / 196;
  width: 100%;
  object-fit: cover;
  height: 100%;
}

表示結果

このように、サムネイル画像を374 / 196のアスペクト比を保持したサイズに表示できます。

もしobject-fit: cover; が記述されていない場合、次のような表示になります。

中央の画像には縦長の画像が入っていますが、374 / 196 の枠内に圧縮された状態で表示されています。object-fit: cover; を指定することによって、画像のアスペクト比を維持しつつ 374 / 196 の枠内を埋めるように拡大・縮小して表示することができます。

また、上記のコードでaspect-ratioを使用しないと、次のような表示になります。

このようにaspect-ratioプロパティを使用することで、どんなサイズの画像がアイキャッチの中に入っても、設定したアスペクト比を保持した大きさに表示することができます。

WordPressのアイキャッチ画像を最適化する

例として、aspect-ratioプロパティはアイキャッチ画像が動的に変わる場合に使用できます。

WordPressでは、ブログ記事を投稿する際にアイキャッチ画像を設定することができます。Web制作者は、どんなサイズの画像サイズ（通常サイズ、横長、縦長...）がアイキャッチ部分に入っても、レイアウトが崩れないようにコーディングする必要があります。

もし、aspect-ratioプロパティを使用していないと、「縦長や横長の画像を入れたらレイアウトが崩れた」ということになりかねません。

aspect-ratioプロパティを使用してアスペクト比を指定することで、どんな画像サイズが設定されても、レイアウトが崩れないようなコーディングができます。

YouTube動画の埋め込み時にアスペクト比を保持

Youtube動画の埋め込み時に、アスペクト比を保持する場合は次のように記述します。

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

.movie {
    /* 調整用 */
    max-width: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
}

.movie iframe {
  aspect-ratio: 374 / 196;
  width: 100%;
  height: auto;
}

表示結果

Googleマップの埋め込み時にアスペクト比を保持

GoogleマップをWebページに埋め込むとき、アスペクト比を保持する場合は下記のようになります。

<div class="map">
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.2808002194565!2d139.71145057578727!3d35.67008727259081!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188dd58df071c5%3A0x27f5b0b8a414593c!2z44ixVE9NQVA!5e0!3m2!1sja!2sjp!4v1692665371603!5m2!1sja!2sjp"
      width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>

.map {
    /* 調整用 */
    max-width: 50%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
}

.map iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

表示結果

padding-topを使ったアスペクト比を保持の方法

aspect-ratioプロパティは比較的新しいプロパティです。このプロパティが使えなかったときは、padding-topを使った方法で代用していました。

<div class="cards">
  <div class="card">
    <div class="card__img">
      <img src="images/dummy.png" alt="">
    </div>
    <p class="card__text">タイトル</p>
   </div>
   <div class="card">
    <div class="card__img">
     　<img src="images/sample2.png" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
  <div class="card">
    <div class="card__img">
      <img src="images/dummy3.jpg" alt="">
    </div>
    <p class="card__text">タイトル</p>
  </div>
</div>

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  /* 調整用 */
  max-width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 40px;
}

/* padding-topを使ったやり方 */
.card__img {
  position: relative;
  width: 100%;
  padding-top: calc(196 / 374 *100%); /* 画像の縦幅 / 画像の横幅 */
}

.card__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}

表示結果

aspect-ratioプロパティが使えるようになったため、padding-topを使ったやり方は使う機会があまりありませんが、予備知識として覚えておきましょう。古いコードを改修する時などに見かけることがあります。

aspect-ratioプロパティの注意点

画像のアスペクト比を保持するaspect-ratioプロパティですが、使いどころに注意しましょう。便利なので全ての画像に対して使用したいところですが、ときにはaspect-ratioプロパティを使用することで不都合になる場合があります。

例として、画像の領域が不自然に広がってしまうことがあります。次のコードで見てみましょう。

<div class="logo">
  <img src="images/logo.webp" alt="">
</div>

.logo {
  background-color: skyblue;
  display: block;
  width: 100%;

  /* 調整用 */
  max-width: 300px;
  margin-left: 40px;
  margin-top: 40px;
}

.logo img {
  display: block;
  aspect-ratio: 140 / 47;
  width: 100%;
  height: 100%;
}

表示結果

ここに、CSSのコードはそのままで、画像下の「ZeroPlus Gate」のロゴ画像を当てはめたとします。

<div class="logo">
  <img src="images/logo.webp" alt="">
</div>

<!-- 画像サイズが違うもの -->
<div class="logo">
  <img src="images/img_logo-and-desc.svg" alt="">
</div>

表示結果

青背景の領域が、指定したアスペクト比の四角形です。この領域に画像サイズが異なる画像が入ると、画像の長い辺に応じて短い辺の比率が調整されるため、画像の領域が広がる場合があります。

元の画像を、指定したアスペクト比の中に無理やり表示させようとするイメージです。

また、object-fitプロパティを併用すると、下記のように画像が見切れることがあります。

.logo img {
  display: block;
  aspect-ratio: 140 / 47;
  width: 100%;
  height: 100%;

  /* 追記 */
  object-fit: cover;

}

表示結果

この場合、aspect-ratioプロパティを使用せずに画像サイズを調整します。下記のように記述してください。

.logo {
  background-color: skyblue;
  display: block;
  width: 100%;

  /* 調整用 */
  max-width: 300px;
  margin-left: 40px;
  margin-top: 40px;
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
  /* aspect-ratioプロパティを使用しない */
  /* aspect-ratio: 140 / 47; */
  object-fit: cover;
}

表示結果