【CSS】ブラウザの大きさに合わせて画像の大きさを自動調節する方法

Web制作の勉強中のみなさん、こんにちは。

今回は、画像の大きさを自動調節する方法をご紹介します。
「最適化」といった方がいいのかな。

レスポンシブデザインで画像の大きさを変えたい時があると思います。

しかし、画像の大きさを「px」(ピクセル)で指定すると、ブラウザを狭めたときに画像が切れてしまったり、親要素からはみ出てしまったりします。
そういうとき、ブラウザの大きさに応じて、画像の大きさも自動で最適な大きさに変化してもらえるとラクですよね。

それではさっそくコードを見ていきましょう。

画像を最適化するCSS

img {
max-width: 100%;
height: auto;
}

この「max-width:100%;」がポイントです。

こうすれば、親要素のwidth幅に合わせて、画像も表示させることができます。

当然のことながら、画像が親要素の幅よりも大きくなることはありません。
ブラウザが小さくなれば、それに合わせて画像も小さくなってくれます。

そして次に「height:auto;」です。

「max-width:100%;」だけだと高さが調整されずに画像が歪んでしまいます。
「height:auto;」も指定して高さも最適化してあげましょう。

注意点

「max-width」はあくまで最大値です。
画像の原寸より大きく拡大されることはありません。

例えばブラウザのwidthが1000pxの場合、画像の原寸widthが500pxであればwidth:500pxで表示されます。

はみ出る大きさの場合にのみ、縮小して表示されると認識しておいてくださいね。

まとめ

いかがでしたでしょうか。

レスポンシブ対応には欠かせないCSSだと思います。

初学者の方はpxで大きさを設定することに慣れている人もいるかもしれませんが、
％（パーセント）で表示するとレスポンシブデザインもラクになるので徐々に慣れていきましょう。

それではまた！

類似記事も紹介しておきます。

独学に悩んでいる方はこちらもどうぞ。
はじめての副業コース