まずはwidth/height属性の指定
aspect-ratioはその名の通り、画像のアスペクト比（縦横比）を指定するものです。
ですがわざわざCSSで指定せずとも、<img>要素のwidth属性とheight属性を指定することにより、ブラウザが自動的にaspect-ratioを計算してくれるようになっています。
例えば500×500pxの正方形（1:1）の画像があるとして、HTMLで以下のようにマークアップすれば自ずとaspect-ratioは1/1になります。
HTML
<img src="img/square.jpg" alt="正方形の画像" width="500" height="500">
ブラウザの検証画面
画像の元々のアスペクト比をブラウザに分かりやすく明示するためにも、<img>要素のwidth属性とheight属性の指定は重要となります。
また、width/height属性の指定は、Webページの読み込み速度にも関わってきます。
width/height属性の指定の重要性を解説している参考記事リンク（英語サイト）
Setting Height And Width On Images Is Important Again
なのでCSSでaspect-ratioの値を指定できるからといって、width/height属性の指定を怠らないようにしましょう。
なお、<img>要素のwidth/height属性の指定と、CSSによるwidth/heightプロパティの指定は異なるものなので注意が必要です。
POINT!
- ・img要素に指定したwidth/heigh属性がaspect-ratioとして認識される！
- ・画像の本来のアスペクト比をブラウザに正しく伝えるためにも、width/height属性はしっかり指定しよう！
- ・CSSによるwidth/heightの指定とは異なるのものなので注意！
aspect-ratioの指定
width/height属性の指定の重要性を押さえたところで、<img>要素にaspect-ratioプロパティを指定して見ましょう。
が、その前に事前準備が必要です。
CSSによるwidth/hegihtの値（≠属性値）の指定がなければ、画像のサイズは属性値のwidth/heightとなります。
そのため、aspect-ratioの値を変更しても画像の縦横比が変わらないということになってしまいます。
よって、<img>要素の属性値によるwidth/height指定だけでなく、CSSでwidth/heighの値を調整する必要があります。
通常、表示させたい横幅（width）を定めた上で、縦幅（height）はautoにしておくと良いでしょう。
また、縦横比を変えると画像が引き伸ばされて歪んでしまいます。
それを防ぐためには、object-fit: coverを指定しておくと良いです。
下は、aspect-ratioを指定する前のCSS調整の例です。
CSS
img {
width: 300px;
height: auto;
object-fit: cover;
}
これにて準備が完了です。
今回サンプルで用意した画像は、縦横比が16:9のこちらの画像です。
16:9のサンプル画像
それではまず、こちらのサンプル画像の縦横比を1:1の正方形にしてみましょう！
CSS
img {
width: 300px;
height: auto;
object-fit: cover;
aspect-ratio: 1 / 1;
}
表示結果
heightの値をautoにしたまま、画像の縦横比を変えることができました。
heightの値を計算する必要がないので、縦横比を細かく指定するのも楽々です。
下は縦横比を1:1.35（やや縦長）にしたものです。
CSS
img {
width: 300px;
height: auto;
object-fit: cover;
aspect-ratio: 1 / 1.35;
}
表示結果
縦横比を文章で表す時は【:】を使うことが多いですが、aspect-ratioを指定する際は【/】を用いる点には注意が必要かもしれません。
なお、スラッシュを挟んで左側の数値が横、右側の数値が縦の比率となります。
POINT!
- ・属性値だけでなくCSSによるwidth/heightの指定も必要！
- ・縦横比が変わっても画像が引き伸ばされないよう、object-fitも指定しておこう！
- ・aspect-ratioで縦横比を指定する際、数値は/（スラッシュ）で区切る！
メディアクエリで切り替える
この章では、PCでは横長の縦横比で画像を表示し、スマホでは縦長の縦横比で表示されるように手を加えていきたいと思います。
メディアクエリを使ってブレイクポイントを指定し、画面（ブラウザ）の幅がある一定の大きさ以下になったら縦横比を切り替える…という方法でやっていきます。
なお、今回はわかりやすくするためブレイクポイントは400pxとし、400px以下とそれを超える幅とで表示を切り替えていきます。
また、このブログサイトはPCからの訪問者が圧倒的に多いため、モバイルファーストではなくデスクトップファーストの書き方で紹介します。
下が縦横比切り替えのCSSサンプルコードです。
CSS
/*400pxを超えるモニターでは横長表示*/
img {
object-fit: cover;
width: 100%; /*横幅は親要素の幅いっぱいに*/
height: auto;
aspect-ratio: 16 / 9;
}
/*400px以下のスマホでは縦長表示*/
@media screen and (max-width: 400px) {
img {
aspect-ratio: 1 / 1.35;
}
}
上の動画では、画面（ビューポート）の幅400pxを境目に画像の縦横比が切り替わっているのが確認できます。
また横幅（width）が100%で可変ですが、それに合わせて可変的なheight値を計算して代入しなくても良いので、縦横比が崩れずにビューポート幅に合わせて画像の大きさが変わるのもポイントです。
POINT!
- ・メディアクエリを使ってPCとスマホで画像の縦横比を切り替えることができる！
- ・任意のブレイクポイントを指定し、aspect-ratioの指定を切り替えよう！
- ・aspect-ratioを使うことで、横幅を可変サイズにしても縦横比が崩れることはない！
アニメーションも可能
縦横比を変更するaspect-ratioですが、実はアニメーションも可能です。
サンプルとして、縦横比16:9の横長の画像から縦横比1:1の正方形の画像に移り変わり、そして元の縦横比の画像に戻るアニメーションを作ってみましょう。
まずはアニメーションを設定する前の通常状態のCSSです。
CSS
img {
width: 300px;
height: auto;
object-fit: cover;
aspect-ratio: 16 / 9;
}
表示結果
そしてanimationプロパティとキーフレームを使ってアニメーションを指定していきます。
CSS
img {
width: 300px;
height: auto;
object-fit: cover;
aspect-ratio: 16 / 9;
animation: aspect-animation 2s linear infinite alternate;
@keyframes aspect-animation {
to { aspect-ratio: 1 / 1; }
}
}
表示結果
横長⇔正方形の縦横比の変化を繰り返す画像アニメーションができました。
他にも、マウスオーバーや画像クリックに合わせて縦横比をアニメーションさせてみるのも面白いかもしれませんね！
POINT!
- ・aspect-ratioはアニメーションさせることも可能！
- ・animationプロパティとキーフレームを使ってアニメーションを指定しよう！
- ・マウスオーバーやクリックに合わせてアニメーションさせるのも良いかも！
– 注目の人気記事 –
