先看代码：
.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%
全部代码：
