【画像がはみ出す問題】画面サイズにあわせ自動的にリサイズ(拡大縮小)するCSS

ブログやウェブサイト、ウェブサービスなどで主流となっている、レスポンシブデザイン。レスポンシブデザインは１つのソースで、画面の大きさが異なる複数のデバイスに対応できるのが大きな強みですが、『レイアウトはきちんと整っているのに、画像が自動的に拡大縮小されない』という問題が起こることがあります。そのようなとき簡単にできるCSSを紹介します。

通常、画像はHTMLのimg タグを使って表示します。このimg タグに何もCSSの設定をしないと、画面に表示できるウィンドウサイズによっては、画像だけが大きく表示されはみ出してしまうことがあります。

特に起こりやすいのが、パソコンで表示確認をしたときは問題なかったけど、iPhone や Androidなどのスマートフォン、iPadなどのタブレットなどで表示をすると、画像がはみ出してしまうパターン。

パソコンは画面の解像度が高いため、なかなか気づきづらいんですね。パソコンでは問題なかったのに、スマホやタブレットで見たら、「あれ、はみ出してる！」なんてこともありがちです。

このように画像がはみ出してしまうときは、img タグにCSSを使って指定をします。
画像を表示している要素に、以下のようにCSSを適用してみて下さい。

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

どのように変わるか一時的に試すのであれば、下記のようにHTMLタグをそのまま書いてしまっても確認できます。

<img style="max-width: 100%; height: auto;" src="画像ファイル名"></img>

正式に使うときは、クラスなどにして外部のCSSファイルに書くことをおすすめします。
画像のタグに上記のように設定をすると、縦横比を維持したまま画像や写真が画面サイズにあわせて、自動的にリサイズされます。