レスポンシブWebデザインにおける画像の配置方法

レスポンシブWebデザインで画像を配置する場合、「Fluid image」の考えに沿えば複数の配置方法があると思います。

一般的なパターン

<div class="image"><img src="path/to/image.jpg" /></div>
.image {
    width: 100%; /* 相対指定にする */
}
.image img {
    display: block;
    max-width: 100%;
    height: auto;
}

一番使われているのではないかと思われますが、img要素の親要素の幅を相対指定にし、
画像サイズを横幅いっぱいに拡大縮小するように配置します。

背景指定パターン

<div class-"item"><div class="image"></div></div>
.item {
    position: relative;
    padding-bottom: 40%; /* 画像の高さ */
}
.item .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(path/to/img.jpg) no-repeat 0 0;
    background-size: contain;
}

親要素にpadding-bottomプロパティを相対値で指定して画像の高さを確保します。
子要素は絶対配置で配置して、親要素の左上を基準に配置されるように指定します。
また子要素には背景画像も指定します。
この方法は画像以外にも動画の埋め込み時にアスペクト比を保ちたい場合などに重宝します。
※background-sizeプロパティはIE8以下では対応していないのでご注意ください。

参考ソース

Creating Intrinsic Ratios for Video · An A List Apart Article

プログラミング学習につまづいていませんか?

自分の力で勉強していく独学は大変です。ゼロからだとなおさら辛いはず。

一人でやっていると、誰かに教えてもらいたい、もっと効率的にプログラミングを学びたい、という場面が必ずあります。

ということならばスクールを検討してみてはいかがでしょう。

オンラインで完結するプログラミングスクール「TECH::CAMP」

TECH::CAMP

TECH::CAMPは人気・評判がともに高く、月額12,800円から受講できるオンライン対応のプログラミングスクールです。

TECH::CAMPでは、ネットで受講できて講師にも質問し放題なので、好きなときに必要な知識を重点的に勉強できます。
オンラインスクールを利用すれば、住んでる場所に関係なくプログラミングスキルが磨けますよ。

独学がちょっと苦しくなってしまった……という方は、オンラインでの受講を考えてみてはいかがでしょうか。

更新情報はTwitterでも配信しています