有的時候在制作自適應網頁時，DIV盒子是自適應，圖片也想要自適應按寬高比例進行展示，這里我們以banner自適應不同瀏覽器尺寸為例，頁面HTML代碼如下：

<div class="banner"><img src="img/banner.jpg"></div>

這樣只是在一個div里面放了一張圖片，那么如何讓這張圖片的寬高比固定呢？

圖片寬度自適應，可以直接設置width為100%，高度這里我們可以用padding幫忙解決。

這里我們可以通過這個方法來計算：圖片寬度 / 圖片的寬高比例 = 值。

我們右鍵圖片查看圖片的原始大小，例如圖片尺寸為800*200px，那么可以得出寬高比為4比1。

所以我們可以把.banner的padding-bottom 或 padding-top的值設置為 100% / 4 =  25%.

最終CSS部分代碼如下：

*{
margin:0;
padding:0;
}
.banner
{
width:100%;
padding-bottom:31.25%;
position:relative;
}
.banner > img{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}