先看代码：
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.box{font-size: 0;}
.item{
display: inline-block;
position: relative;
width: 25%;
height: 0;
padding-bottom: 25%;
background: red;
}
.item:nth-child(2n){background: #ccc}
效果图
这里有两处解释一下：
1.给 item 设置 dispaly:inline-block 让他能在一行排列且不脱离文档流，再设置宽度为25%。此时原则上四个排列在一行的 div 。但由于inline-block自带属性让每个div之间有间隙 ，解决方法：在父元素box上添加font-size:0的属性
2.给 item 设置 height:0;padding-top/bottom:25% ，此时的padding是根据窗口的宽度来计算的。
最后我们再给item下面加上图片，item设置相对定位；img设置绝对定位、宽高为100%
全部代码：
<style>
*{padding: 0;margin: 0;}
.box{font-size: 0;}
.item{
display: inline-block;
width: 25%;
height: 0;
padding-bottom: 25%;
background: red;
position: relative;
}
.item:nth-child(2n){background: #ccc}
.item>img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<body>
<div class="box">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
</html>
效果图
