大きな画像は、パソコンのディスプレイで表示できても、スマートフォンで見るとはみ出してしまうことがあります。

本ページでは、画像をレスポンシブ対応する方法を説明します。

画像の最大幅を指定する
横幅700pxの画像があったとします。この画像は、スマートフォンで見ると、以下のようにはみ出してしまいます。

画像が横にはみ出していて、木の小屋が半分しか表示されていません。
これを避ける簡単な方法は、max-widthプロパティを使うことです。max-widthは、最大幅を示します。以下は、CSSの例です。

【max-widthプロパティを使うCSS】
.test {
max-width: 100%;
}
クラスtestをimg要素に適用すると、以下のように最大幅が親要素以内(以下では画面幅)に収まります。

画像がはみ出しておらず、木の小屋がすべて表示されています。
marginで左右に余白を指定する場合、その余白分を引いた数字を指定する必要があります。例えば、margin-leftとmargin-rightで4%を指定する場合、max-widthでは92%と指定します。