■スマホで画像をはみ出さないようにしたい（個々の画像に対して設定）■
レスポンシブ・ウェブ・デザインを作成する上で1つの障害となるのが、画像です。パソコンでは大きく見せて、スマホでは画面をはみ出さないように上手く表示するには、どうすればいいか。そういう時は、imgタグに対し、スタイルシートのmax-width(最大幅の指定)を適用するのが便利です。例えば、下記は、150px幅の端末を想定したものです。画面幅を示す青い枠線(150px)を、画像(200px)がはみ出してしまっています。
[max-width]を設定していない要素
150px / 250px
ここで、画像に対して、max-widthを指定してあげます。例えば、90%と指定すると、画像が、横幅(150px)の90%(135px)以上あった場合に、90%(135px)まで自動で縮小してくれます。height: auto ;を指定しておくことで、横幅と縦幅の比率が保たれます。
CSS
/* 画像の最大幅を指定する */
img
{
max-width: 90% ; /* 横幅の90% */
height: auto ; /* 縦幅を自動調整 */
}
先ほどの画像に、max-width: 90% ;を指定した例です。青枠の横幅(150px)の、90%(135px)の大きさまで、画像が自動的に縮小されているのを確認できますね。このように指定しておくことで、画像を、デスクトップPC幅でも、スマホ幅でも、適切に表示させることができます。大体、90%くらいを最大幅にすると、バランス良い表示になります。