画像の大きさを最適化する max-width:100%;

レスポンシブウェブデザインでスマホに対応する際、PCサイト用の画像の大きさのままだと画面からはみ出てしまうケースがあります。スマホの解像度は320pxぐらいなので、幅320px以上の画像を掲載している場合、小型スマホでは崩れて表示されてしまうことがあります。

これを回避するには、すべての画像の大きさを300px程度で作成すればよいわけですが、ガラケーサイトとは違いスマホはフルブラウザのため、スタイルシートで対応することができます。

具体的には、レスポンシブウェブデザインのスマホ用のCSSの箇所の「img」の箇所に、「max-width:100%;」などと指定しておくとよいでしょう。

画像の大きさを最適化する例

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

この「max-width:100%;」は、「画像の大きさの最大値」が「親要素のwidth幅の100%の値」という意味になります。そのため、画像が親要素よりも大きくなることはなくスマホ画面内に収めることができます。また、このままでは横幅のwidth幅だけが縮小されてしまい、高さが調整されずに画像が歪んでしまうため、height:auto;を指定して高さも最適化します。

この「max-width」はあくまで最大値の意味ですので、もともと画像がスマホ画面に収まる200px程度の大きさの場合は拡大されずにそのまま表示されます。500pxなどのはみ出る大きさの場合にのみ、縮小されて表示されると考えておくとよいでしょう。

max-width:100%;は親要素より大きい場合のみ縮小される

例えば、幅「200px」高さ「300px」のdiv要素があったとします。

#sample {
width:200px;
height:300px
}

この領域に、幅「100px」高さ「100px」の画像を掲載しました。

<img src="blue.png" width="100" height="100" />

すると、当然このように表示されます。

ここで、画像に「max-width:100%;」を指定します。

img {
max-width:100%;
}

すると何も変わりません。

これは「親要素のwidth幅が200pxの領域」のため、「画像のwidth幅の最大値が親要素の幅200px」という意味になりますが、width幅が100pxの画像で200px以内には収まっているため、そのまま表示されます。

同様に、「max-width:200%;」としても「親要素の幅200pxの200%で400px」の意味になり、これも400px以内には収まっているため、何もかわらずにそのまま表示されます。

次に「max-width:25%;」に変更してみました。

img {
max-width:25%;
}

この場合、親要素200pxの25%で幅50pxが最大値になるため、width幅が最大値の50pxまで縮小して表示されます。ただし、これではwidth幅のみが縮小されて画像が歪んでしまうため、「height:auto;」も指定します。

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

すると高さも調整されてこのように表示されます。

つまり、max-widthを25%にしても画像の大きさが25%に縮小されるわけではなく、「親要素のwidth幅の25%の値」が最大値になるように縮小されるということです。

次に、親要素よりも大きい、幅「250px」高さ「250px」の画像を用意しました。

<img src="orange.png" width="250" height="250" />

この画像を幅「200px」高さ「300px」のdiv要素に掲載するとはみ出してしまいます。

スマートフォンで表示した際、画像がはみ出てしまうのはこのパターンが多いはずです。

このような場合、上記のように「width:100%;」と「height:auto;」を指定すると、以下のように親要素の領域内に縮小されて表示されるようになります。

画像にwidth:100%;は使わない方がよい

ちなみに、「width:100%;」と指定すると親要素の領域いっぱいまで拡大して表示されますが、この場合も「height:auto;」を指定することで画像が歪まずに表示することができます。

けれども、「width:100%;」と指定した場合、小さな画像でも拡大して表示されてしまいます。

「max-width:100%;」の場合は最大値という意味ですので、主にはみ出た場合に縮小するためのものですが、単に「width:100%;」と指定するとはみ出るか否かに関わらず、画像が領域の最大まで拡大して表示されることになります。

スマホ画面で大きく表示されてよいようにも思えますが、サイト内ではアフィリエイト広告やアクセス解析のタグなどで小さな「1pxの画像」なども使用されていることが多いです。

この「1pxの画像」についても拡大されてしまい、拡大されたwidth幅に合わせて高さも拡大されるため、もしその画像に色がついていない場合、大きな空白が出来てしまうことになります。

そのほか、小さな画像を拡大する場合は画質がぼやけてしまいますので、画像に「width:100%;」の指定をするのは避けた方がよいでしょう。