画像の大きさを最適化する 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が最大値になるため、100pxの画像はwidth幅が最大値の50pxまで縮小して表示されます。ただし、これではwidth幅のみが縮小されて画像が歪んでしまうため、「height:auto;」も指定します。

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

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

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

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

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

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

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

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

また、上記の青い100pxの画像のように親要素内に収まっている画像の場合には、拡大も縮小もされずにそのままの大きさで表示されます。スマホ用に画像の大きさを最適化する場合、この「max-width:100%;」を指定しておくとよいでしょう。

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

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

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

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

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

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

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