【Labs】画像をレスポンシブデザインに対応させる

こんにちは（・∀・）

今日は画像をレスポンシブデザインに対応させる方法について解説します。

レスポンシブデザインの画像

ネットを見ていると時々画像が画面からはみ出して表示されている時があります。横スクロールで見せる感じにしている場合は全然問題ないのですが、Webサイトをレスポンシブデザイン化したにも関わらず、画像のサイズまでは見落としていた、というサイトは時々見かけます。

Webサイトのレスポンシブデザイン化に合わせて画像もレスポンシブデザインに対応させる方法です。

可変サイズの画像の作り方

横幅1000pxの写真をWebサイトに表示させます。

おっと、写真サイズが親要素より少し大きかったようです。このまま表示してしまうと画像が親要素からはみ出してしまい切れて表示されるか横スクロールバーが出てしまいます。しかしPhotoshopなどで写真のサイズは小さくしたくありません。ここは写真サイズはそのままでCSSの方で大きさを調整します。

p img {
  width: 700px;
}

CSSで画像サイズを指定しましたすると次のように表示されます。

いい感じで画像が表示されました。

しかしブラウザのサイズを縮めてみてください。このままだと画面が小さくなるとまた親要素から写真はまたはみ出して切れて表示されてしまいます。

なのでここからが画像のレスポンシブデザイン化になります。

CSSで次のように指定してみます、すると...

p img {
  width: 100%;
}

今度はブラウザのサイズを変更しても画像も一緒に可変になり表示されるようになりました。

画像の最大サイズや最小サイズを指定しつつ可変にしたい場合は...

p {
  max-width: 700px;
  min-width: 500px;
}
p img {
 width: 100%;
}

CSSで親要素にmax-widthやmin-widthを指定するだけで最大幅・最小幅を固定幅にしつつ画像を可変にすることができます。

いかがでしたでしょうか、とっても簡単に画像をレスポンシブデザイン化することができましたね。画像の幅指定を固定ではなく%などの可変にするだけでレスポンシブデザイン化の完成です。