ものごとは何でもわかりやすい方がいい！
たとえばこの「 aspect-ratio 」プロパティがそうだ。
webデザインを始めて間もない頃は、誰もが画像のレスポンシブで悩むはず。
かくいうこの僕も、webデザインを独学で勉強し始めたばかりですが。
（ちなみに、49歳の親父です・・・）
そんな僕でも「これは納得」と言えるほどわかりやすくシンプルな、 CSS のプロパティ「aspect-ratio」を使ってみませんか。
aspect-ratio の使い方
使い方は簡単です。基本的には、使いたい画像のサイズが 16：9 であれば CSS に aspect-ratio: 16 / 9; と書くだけです。
それ以外に、最低限必要なプロパティを書き加えれば、アスペクト比を保ったままレスポンシブが可能です。
実際のコードを見てください。
background-image （背景画像）の場合
以下のようにコードを書きます。
See the Pen Untitled by TK (@dameoyaji) on CodePen.
※ background-image で画像配置する時は、width（幅）と background-sizeの指定が最低限必要になります。
img （画像）の場合
以下のようにコードを書きます。
See the Pen Untitled by TK (@dameoyaji) on CodePen.
※ img で、画像配置する時は、img に width（幅）の指定が必要です。親要素があれば、そこにも width（幅）を指定してください。
その他の方法
background-image （背景画像）の場合
背景画像の縦横比を維持してレスポンシブしたい時、多くの人が padding-top または padding-bottom で % 指定していると思われます。
16 : 9 の画像サイズであれば 9 / 16 × 100 = 56.25%と計算して、こんな感じで
↓↓↓
この方法でも表示結果は同じなんですけど、いまいちわかりにくい。
padding-top に % 指定で、要素の横幅を引っ張っているんですが、なにかモヤモヤします。
（僕はわかったふりして使ってました・・・）
img （画像）の場合
img 画像の時は height を auto にして、レスポンシブすることができます、こんな感じで
↓↓↓
この方法のコードはシンプルですが、アスペクト比を保っているわけではなく、領域を確保しているだけです。
（たぶん・・・）
まとめと注意点
「aspect-ratio」 君を待っていた！
君は本当にわかりやすいプロパティだ。
特に僕のような初心者には、意味を理解した上でコードを書くことが重要。君のおかげで、一つモヤモヤがなくなり、気分もコードもすっきりすることができた。
今後は background-image でも img でも、アスペクト比を保ちたい時は君を使わせていただきます。
最後に注意点として、対応プラウザですが 2022年4月現在、モダンプラウザでは全て対応できているようですが、古いバージョンでは確認が必要だと思います。また IE（インターネットエクスプローラー）には対応していませんが 2022年6月16日には、IE のサポートは終了するので、その後は気にすることはないでしょう。
ぜひ、皆さんもこのすっきりプロパティ「aspect-ratio」を使ってみてはいかがでしょうか。
ご清聴ありがとうがございました。
