网页中如何让图片按照宽高比例固定显示并自适应布局

有的时候在制作自适应网页时，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;
}