今回はHTMLの小技についてご紹介いたします。

imgタグにより表示させた画像は、表示領域を縮小してもそのままのサイズで表示されます。

PC上で閲覧するときはブラウザのウィンドウサイズを縮小しなければ大丈夫なことが多いですが（よっぽど大きな画像を載せない限りは・・・）、スマートフォンで閲覧するときは問題になるでしょう。
それは、スマートフォンディスプレイはPCのそれと比べてサイズが小さいからです。

この現象への対処方法はいくつか存在しますが、今回は普段は画像サイズは元のまま、画像が表示領域をはみ出てしまう場合は領域に合わせて画像を縮小するようにします。

実現方法

結論を言うと、imgタグの最大幅(max-width)を100%に、高さ(height)を自動(auto)にすることでできます。
CSSには以下のように記述します。

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

HTMLは従来通りの書き方から変わりません。

<img src="画像のURL">

max-widthに100%を指定することで、画像の最大幅が元サイズとなり、表示領域からはみ出ないようになります。
しかし、このままでは高さがそのままになってしまい、画像を縮小したときに縦長に表示されてしまいます。（高さは縮小されない）
そこで、heightにautoを指定することでアスペクトを元画像に合わせて縮小されるようになります。

上記の指定方法の場合、imgタグの画像すべてに適用されてしまうため、一部のスタイルのみ適用したい場合は以下のようにすると良いでしょう。

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

<img class="adjust-size" src="画像のURL">

以上が実現方法です。

imgのスタイル指定以外にも、最大幅が指定されたdivコンテナで内包する方法も存在します。
しかし、こちらの場合、最大幅を明示的に指定しなければいけなくなるので多少面倒です。
今回は割愛させていただきます。

参考サイト様

「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法
【CSS】「max-width」を使えばスマホ用とPC用に自動で画像のサイズを縮小・拡大できます。