ダメ親父伝

1973年生まれ、ダメ親父のブログ=_=)

CSSプロパティ 「aspect-ratio」で叶える画像レスポンシブ がわかりやすい!

ものごとは何でもわかりやすい方がいい!

たとえばこの「 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」を使ってみてはいかがでしょうか。

 

ご清聴ありがとうがございました。