相信很多前端會遇到這個問題：要做一個尺寸自適應的頁面，其中某個容器的背景圖也需要跟着容器的尺寸一起改變。如果背景是有規律的純色或者漸變還好辦，直接平鋪即可。但如果背景是要求完全顯示的一張完整的圖片呢，我們使用background-image這個屬性是沒辦法達到我們的要求的，因為背景圖的大小是不會隨着容器改變的。
如此我們就要考慮能達到我們要求的元素了，用img元素能夠實現尺寸的適應：
1 <div style="width:200px;height:200px;"> 2 <img style ="width:100%;height:100%;" src="xxx.jpg" /> 3 </div>
這樣一來，img的尺寸就能和容器div的尺寸相適應了。但如何在容器中裝元素呢，畢竟圖片是做背景而不是內容來用的。這里我們需要用一點作弊的方式來實現了：將容器的內容先轉換為塊級元素（如果它不是塊級元素），然后使之浮動回到本來應該在的位置。
1 <div style="width:200px;height:200px;"> 2 <img style ="width:100%;height:100%;" src="xxx.jpg" /> 3 <span style="display:block;position:relative;margin-top:-200px;">內容</span> 4 </div>
如果父級的div的尺寸是動態不固定的，則浮動的margin-top值需要用js判斷之后再做賦值。
這種方案其實也只是一種折中的辦法，本人尚未找到純css的解決方案，如果有更好方法，歡迎留言討論，互相學習。
10-30更新：
css3中新特性可以完美解決上面問題：
background-image:url(/../);
background-size:100% 100%;