ちかごろのWebサイトといえば、スマホ対応が必須ですね。
@media only screen and ( max-width: 40em ) /* 640 */
{
img{
width: 100%;
height: auto;
}
}
画像ファイルは、こんな風にしておけば、縦横比を維持したまま、スペースいっぱいに広がって表示されます。
ちょっと面倒くさいのが、divなんかのサイズを、背景画像の大きさにあわせたいとき。divは、放っておくとdivの中身にあわせたサイズになってしまいますので、
div{
width: 960px;
height: 200px;
background-image: url("bgimage.jpg");
background-size: 100%;
}
こんなふうに、具体的なサイズを与えてやればいいんですが、スマホなど表示サイズが一定でない場合は少々面倒です。
@media only screen and ( max-width: 40em ) /* 640 */
{
div{
width: 100%;
height: 0;
padding-top: calc(200/960 * 100%);
}
}
heightを直接指定できないっていうのが何だか嫌な感じですが、paddingは縦方向の設定値も、その包含ブロックの幅を基準にしているので、heightは0にしちゃってpaddingで設定する、というのがうまいやり方のようです。
数値も一定ではないので、縦横の比率を入れておいて、都度calcで計算させます。
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法
CSS heightは個人的によくつまずくポイントです。