css实现正方形,即宽度为百分比,高度与宽度相同的布置方式

这是开发中遇到的一个问题:一组图片列表,每行展示5个,图片宽度按照页面宽度的20%设置,然后高度与宽度相同,也就是展示为正方形,该如何用css设置呢?先看demo

这里需要用到伪元素:before,如下是html

<div class="box">
    <div class="content diff"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content diff"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content diff"><div class="img">假设这是图片<br>就是这个div</div></div>

    <div class="content"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content diff"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content diff"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content"><div class="img">假设这是图片<br>就是这个div</div></div>

    <div class="content diff"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content diff"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content"><div class="img">假设这是图片<br>就是这个div</div></div>
    <div class="content diff"><div class="img">假设这是图片<br>就是这个div</div></div>
</div>

继续阅读