在处理自适应的时候，就拿图片来说吧，因为图片的尺寸可能不一样，同时height用百分比的时候不好形成想要的效果，要实现同样的宽和高，一般情况下可能考虑js来实现，
这里给介绍一个可行的方法，那就是借助padding来实现，
需要注意的是：
1、adding的top/right/bottom/left四项都是参考的父容器的宽度；
2、padding存在的时候 哪怕overflow为hidden，此时padding部分的内容是可以显示的，
来看具体的实例代码，将四张尺寸不一致的图实现等宽等高显示，
<style type="text/css">
*{margin:0; padding:0;}
.box{ width:100%;}
p{ width:25%; display:block; float:left;}
a{display:block; margin:0 2%; height:0; padding-bottom:63.7333%; background-color:red; position:relative; }
img{position:absolute; width:100%; height:100%; }
a img{ border:0;}
/*
1、padding(top/right/bottom/left) % 时，都是相对父元素的 Width
2、a的margin 是相对于p的，
3、此处四张图尺寸不一样
*/
</style>
</head>
<body>
<h1 style='text-align:center; line-height:30px; padding:20px 0;'>改变窗口尺寸试试</h1>
<div class="box">
<p>
<a>
<img src="1.jpg"/>
</a>
</p>
<p>
<a>
<img src="2.jpg"/>
</a>
</p>
<p>
<a>
<img src="3.jpg"/>
</a>
</p>
<p>
<a>
<img src="4.jpg"/>
</a>
</p>
</div>
<div style="clear:both; padding:20px;">
兼容：Firefox、Webkite、Opera、Safari、IE8+
</div>