CSSのaspect-ratioの使い方について
対応ブラウザや効かない時のチェック項目も

昔ではブラウザの問題などもあって使えなかったものが、今のモダンブラウザがほとんど使用されている状況になってより便利に使えるといったCSS絡みのものがどんどん増えてきているような気がします。特にやはりIEが無くなったというのは大きいのかなと思っています。

今回のaspect-ratioに関してもIE以外で対応していたため、IEが無くなった今はほとんど（一部例外あり）のブラウザ問題なく使用できるため、知っておくと良いと言えます。

簡単に言えば、widthやheightの値と実際のアスペクト比が違っていた場合でも、widthやheightの値ではなく指定したアスペクト比で表示ができるというもので、使い方の説明やどういうケースで使いやすいかというのを見ていきましょう。

そもそものアスペクト比について

まずはaspect-ratioの前に、アスペクト比について簡単に見ておきましょう。
そもそものアスペクト比とは画像やモニタなどの「縦（高さ）」と「横（幅）」の長さの比率のことをさします。よく縦横比といった言われ方もしているかと思います。

画像などは、縦と横にそれぞれサイズがpxであるかと思いますが、例えば640px × 480px は「4:3」のアスペクト比という事になります。

1,000px × 1,000px は「1:1」になりますし、SNS系やブログのアイキャッチ画像によく使われる1,200px × 630px の場合は「1.91:1」となります。モニタでよく見るサイズの1,920px ×1,080pxのフルHDなどであれば、「16:9」となります。

aspect-ratioについて

そんなアスペクト比ですが、cssのaspect-ratioを使う事でwidthやheightなどの値ではなく、指定したアスペクト比で表示をする事が出来ます。

使い方はとても簡単で、cssで下記のように記載して使います。

/* アスペクト比：16:9 */
aspect-ratio: 16 / 9;

/* アスペクト比：4:3 */
aspect-ratio: 4 / 3;

/* アスペクト比：1:1 */
aspect-ratio: 1 / 1;

この指定をすることで、指定した縦横比で表示することができます。
注意点としては、指定はスラッシュ/が使われるという点です。比率を書くときに一般的によく使われやすいコロン:ではないので注意しましょう。

どういったシーンで使われるのか

これだけの解説だと、そうは言っても使い道そんなに無くない？と思うかもしれませんが、実はクライアントワークなどにおいて特定のシーンやケースで使われたりしています。

カード型レイアウトで画像がバラバラな時

サイトのデザインなどで、カード型のレイアウトで、画像＋テキストなどを横並びに3×3表示したりというケースがあるかと思います。ブログなどでもよく使われますね。

こういうときにクライアントから素材を送ってもらって、それらの画像が全て同じサイズ比率であったり、サイズがバラバラでもトリミングなどして整えられる余地のある画像であれば良いのですが、画像サイズもバラバラでトリミングも難しいような画像だと色々と難しくなってしまいます。

画像によって、幅や高さのサイズが異なるとレイアウトとして崩れてしまいます。800×800もあれば、800×600もあり、1000×700もあるといったようなケースで、トリミングができない画像だとなおさらです。

そんなサイズがバラバラの画像であっても、アスペクト比を指定して表示することで、縦横比率を保ったまま表示することができるので便利になりますので、まずは実際にaspect-ratioを使った例を見ていきましょう。

元画像がこちら。

アスペクト比（1:1）を指定した場合がこちら

ただそのままアスペクト比を指定しただけですと、画像をそのまま潰したような形となってしまい、そのまま1：1に無理矢理縮小した形で見た目がよくないため、そこは調整する必要があります。

object-fit: cover;も合わせて使うことが大事

上記の様に画像の本来のサイズと異なるアスペクト比を指定して使うと、本来と異なる比率なため画像が縮小された際にはおかしな見え方になります。

例えば300px × 200px の画像をアスペクト比1:1の正方形で表示しようとすると、横幅の100px分がぎゅっと詰まってしまった状態で表示されることになります。そんなケースを避けるためには、object-fit: cover;も合わせて使うことでそういったケースを避ける事が可能になります。

img{
  width: 100%;
  height: 100%; 
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

こうすることで、画像のアスペクト比を維持しながら画像を拡大・縮小などして表示してくれるようになります。ただし、拡大縮小する際には中央が基準値として設定されています。

今回の画像は中央で拡大しても問題ない画像を用意しましたが、全ての画像がそうなるとも限りません。中央が基準だと…という場合は、object-positionプロパティを使う事で基準の位置を変えることもできますので気になる方は調べてみましょう。

ただあまりここを複雑にやりすぎると、結果的によりややこしくもなってしまうので、ほどほどが良いかとは思います。

YoutubeやGoogleMapの埋め込みにレスポンシブ時は特に役立つ

実はaspect-ratioを使うシーンと言えば、おそらくはこれが今だと真っ先に挙がるのでは無いかとも思っています。

YoutubeやGoogleMapなどを埋め込むにはiframeが使われています。
その時にwidthやheightの値を指定して埋め込むと、レスポンシブで作られたサイトの場合、スマホで見た時にレイアウトが崩れたりすることで問題になります。

そのため、今まで多くの場合は、padding-topを使ったいわゆるハック的なやり方で調整をしてきました。実際当ブログでも、下記の記事のようにGoogleMapの埋め込みやYoutubeの埋め込みのブログ記事で、padding-topを使ったやり方で解説もしています。

これでも問題はないのですが、事前の設定やタグを色々追加してと設定が少しややこしかったりもしますが、aspect-ratioを使えば、非常に簡単でシンプルに埋め込みが可能になります。

aspect-ratioを使ってYoutube動画を埋め込んだサンプル

実際にaspect-ratioを使って、Youtube動画を埋め込もうと思うと下記だけで可能になります。動画はサッカー好きの管理人の好みでついこの間引退をされた小野伸二選手を選びました。

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

前までのpadding-topを使ったコードを比べても遥かに楽なコードで埋め込む事が可能になりますし、これだけでもレスポンシブにも対応できブラウザ幅を縮小しても同じ比率のまま表示されるはずです。

PCとスマホで比率を変えたい場合

あまり多くはないケースですが、横長画像の場合、PCでは良い塩梅で見る事ができるのですが、スマホで見ようとした場合、スマホの画面が縦長のせいもあって、かなり小さく思ってたより見にくいといったケースがあります。

そういう場合、本来ならPC向けとSP向けの画像などを用意していれば良いのですが、予算や都合上もあって1枚しか画像がないという場合、縦横比をスマホで変えて表示したいというケースがあったりします。

Googlemapなども4:3で表示するのですが、スマホの縦長の画面だともう少し変更して高さを出したいという事を希望される方もいらっしゃいますので、そういった時にPC向けでは4:3、スマホ向けでは1:1のアスペクト比を設定すれば変更する事ができます。

Googlemapの埋め込みをPC向けとSP向けで比率を変えるサンプル

実際に下記の様に埋め込む事で、PC向けとSP向けで比率を変えたGoogleMapの埋め込みが可能になります。違いがわかりやすくなるように、今回はPCが2：1、スマホで1：1という比率にしています。場所はいつもと同じくサッカーの聖地、国立競技場にしてみました。

iframe {
  width: 100%; 
  height: 100%;
  aspect-ratio: 2 / 1;
}

@media only screen and (max-width: 480px) {
  iframe {
    aspect-ratio: 1 / 1;
  }
}

こうすることで、PCだと2：1のアスペクト比でマップが表示され、ブラウザ幅を縮め480pxになれば1:1の比率でマップが表示されるようになります。

Youtubeはアップされてる動画のサイズなどの問題もあるため、比率が異なると枠が大きいだけで黒い帯みたいなものが表示されますが、Googleマップは比率をどんな比率にして基本はずっとマップは続いているため、余白的なものがないためPC/SPなどで比率を変えたりという事が可能です。

aspect-ratioを使う際の注意点など

最後に便利に見えるaspect-ratioですが、注意点などについて見ておきましょう。

Safariには少しだけ注意が必要

最初に今のモダンブラウザではほとんど対応という記載をしましたが、一部例外というのがこれに当たり、Can i useを見るとわかるのですが、15以前の古いVerでは未対応となっています。

15にバージョンが上がったのが2021年9月20日になるため、もしかしたら場合によってはまだ使っているユーザーなどもいる可能性もあるため、Analyticsのデータなど見て判断すると良いかもしれません。

大枠の画像に使うと思いもよらないところにも反映されるリスク

aspect-ratioは画像の比率をいわば半強制的に決めてしまうことになるため、cssの設定の仕方などによっては、自分が想定していなかったところにその比率が反映されてしまうリスクもあります。

極論ですが、デフォルトCSSや共通CSSなどのimgに設定してしまえば、サイトで使う全ての画像がそのアスペクト比で表示されてしまうということになってしまいます。（そんな使い方する人はいませんが…）

先ほどのGoogleMAPやYoutubeの埋め込みもiframeに対してサンプルでcssを当ててますが、あの書き方をしてしまうと、マップもYoutubeもどちらも後で書いた方の設定が上書き設定されるため（実際のコードにはclassを当ててます）、そういった点も注意が必要です。

使う際にはそのCSSの設定で他に影響出る範囲は無いかなと言うのも注意して使うと良いの出は無いかなと思いますし、基本はピンポイントでこの領域でのみ使うというやり方でやっていくものかなと思います。

設定したのに効かない時の見るべき点

aspect-ratioを調べている人の関連ワードに「効かない」というワードがあります。実際にコーディングなどのシーンで使っていると、あれ？効いてない…というシーンに遭遇することもあります。

ただでさえ少しややこしい使い方になるので、それが効かないとたまにドツボにはまってしまいますので注意が必要ですが、aspect-ratioが効かない時というのは、だいたい下記のケースの時が多いです。

• そもそもaspect-ratioのスペルが間違っている
• 4 / 3などの比率をスラッシュ/ではなくコロン:で書いている
• 高さ（height）の指定がされていない。
• 高さ（height）の値がpxなどの値で指定されている。
• 親要素にdisplay: flex;が指定されている場合（対処法あり）

だいたいこれに該当する事が多いです。
スペルミスやスラッシュでない書き方などはすぐわかるのですが、高さの指定などによっては書き方などによって効かない場合もあり、高さをpx指定してしまうと比率でなくなるため%やautoなどの指定が必要になります。

また、親要素にdisplay: flex;を指定していると忘れがちですが、この場合はheightにfit-contentもしくはmax-contentなどを指定しなければならないので、こちらも注意しましょう。スペルもあってて書き方も合ってて高さも指定してるのに何故？？となった時はこれのケースもあるため注意しておきましょう。

まとめ

aspect-ratioについてまとめてきましたが、実際に使い方を覚えてどういうシーンで使えるかというのを理解すれば、時と場合によっては非常に役立つと言いますか、便利なプロパティと言えます。

クライアントのブログなどを作った際に、アイキャッチ画像が毎回バラバラのサイズでアップしてくる。といったケースなどの場合、ブログ一覧の記事リストなどの画像表示にはこのアスペクト比を指定して使う事で、レイアウトが綺麗に整うかもしれません。

また特にGoogleマップの埋め込みなどでは、PCとスマホでは画面が異なるのでスマホの場合はマップをもう少し大きく縦長に表示したいという場合、aspect-ratioを使っていればとても簡単に対応ができます。

使い勝手が限られてはいますし注意点も必要にはなりますが、使い道などをしっかり覚えるとかなり役立つシーンなどもあるため特性なども覚えつつ使えるようになっておくと、どこかの制作シーンできっと役に立つのではないかなと思います。