レスポンシブ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