imgのCSSはどのように設定すればよいか？

閲覧環境に応じて、サイト内画像を最適に表示させるにはどのように設定すればよいのでしょうか？

スマホで閲覧する際は画面が小さいですので、パソコン上と同じ大きさで画像を表示すれば、デザインが崩れてしまいます。そのため、閲覧環境に応じて自在に画像の大きさを調整させる必要がありますが、一般的には「max-width」で画像の最大値を指定しておくことにより、どのような閲覧環境でも画像の大きさを最適化することが可能になります。

imgのcssに「max-width:100%;height:auto;」を指定する

この「max-width」を指定した際、「親要素のwidth幅の割合」に対して最大の値をとるように画像を最適化することができます。親要素に対する割合ですので、端末の閲覧画面の大きさの最大値ではありません。

コンテンツ中の画像を最適化させる場合、この指定をするだけでよいでしょう。

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

ここで「max-width:100%;」のみを指定した場合、高さは自動で調整されないため、画像が歪んた形で表示されてしまいます。そのため、「max-width:100%;」と同時に、「height:auto;」も指定しておくようにしましょう。

ポイントは「max-width」で横幅の最大値の意味になるため、この最大値を超える場合のみ縮小されるということです。ですので、画像のデフォルトの大きさが親要素のwidth幅に収まっている場合、縮小も拡大もされずにそのまま表示されます。

一方、「max-width:100%;」ではなく、単に「width:100%;」とした場合、画像の大きさを親要素と同じwidth幅で指定することになるため、親要素の幅いっぱいまで拡大されて表示されることになります。

この指定をした場合、サイト内のアクセス解析などで「1px」の画像を使用していた場合、最大限にまで拡大されて表示されてしまうため、大きな空白が生じてしまうことになります。

「1px」などの画像を使用していない場合は特に問題はないかもしれませんが、拡大されて表示される場合、画像が歪んでしまう傾向があるため、できるだけ「width:100%;」の指定はしない方がよいでしょう。

「width:100%;」ではなく、「max-width:100%;」を「height:auto;」とともに使用することをおすすめします。

この指定については、レスポンシブウェブデザインのメディアクエリで切り分けしなくても、パソコン用のCSSでもスマホ用のCSSでも両方で対応できます。スマホで閲覧時のみ縮小するというのではなく、閲覧環境によらずはみ出る場合にのみ縮小されますので、すべてに同じ設定をしておけばよいでしょう。