「CSS」ウィンドウサイズに合わせて画像を表示させる

こんにちは。今回は画像の表示サイズについてです。

WordPressを利用しているのならテーマである程度CSSが作られてますからとくに意識する必要もないのですが、無料ブログやCMSを使っていると気になるのが画像サイズです。

パソコン表示に合わせて横幅640pxで画像をアップしたはいいけどスマホ表示だとはみ出てしまう..。

この場合どのように対処すればいいのでしょうか？

ウィンドウサイズに合わせた画像サイズ

これはパソコン用、タブレット用、スマホ用とそれぞれの画像サイズを3つ用意してそれぞれアップすればいいという考え方もできなくもないです。
しかし、画像は容量を圧迫しますし手間がかかってしまうので現実的な方法ではありません。

そこでCSSに記述して画像を調節するという方法があるので見てみましょう。

画像のCSSとしてこのように記述するだけでユーザーが閲覧するウィンドウサイズに合わせた画像表示になります。

しかし、この記述だけでは少し足りません。この記述だけだと縦横比を無視した状態となってしまうので思った通りの表示になりません。

これは「height:auto」を追記することで縦横比問題は簡単に解決できます。

画像データより大きく表示させたくないといった場合

パソコン用画像の最大表示幅を640pxとしましょう。336pxだったり、380pxだったりと全ての画像を640pxで表示させたくないという場合があります。

この場合「width」の頭に「max」を加えるだけで解決できます。画像を画像編集ソフトといったツールで作成して保存する時の大きさになるわけです。

しかしこちらも縦横比を無視している状態なので画像のレイアウトが崩れてしまう可能性があります。そこでこちらもこのように追記しておきましょう。

まとめ

今回紹介した方法はCSSに追記するだけですし、簡単な記述をするだけなので手間がかかりません。

画像はWEBサイトにとって大事な要素です。たまには自分のサイトはどのように見えているのだろう？
と、様々なデバイスでユーザー視点の確認をすると見えてくるところがあるかもしれません。