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>

下面是css

.box {
    background: lightblue;
    width: 500px;
}
.content {
    width: 20%;
    height: 100%;
    float: left;
    background: inherit;
    position: relative;
}
.content:before {
    content: "";
    padding-top: 100%;
    vertical-align: middle; /* 这是关键,否则图片下方会超出一条缝 */
    display: block;
}
.diff {
    background: lightpink;
}
.content .img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    /* 下面没有用,只是看着好看 */
    font-size: 12px;
    color: darkgray;
    text-align: center;
    padding-top: 30px;
}

css设置:before的padding-top为100%以及dispaly为block就可以形成一个正方形的空白,然后将外层设置relative,图片absolute,然后高宽100%,这样就可以形成一个正方形的图片了。

需要注意的是:before一定要设置vertical-align为middle,否则有可能图片下方会超出正方形的区域…

另外,.content我是用的float:left来排列,如果使用inline-block也可以,只是将代码换行书写会造成每个.content之间有缝隙,这时可以网上搜索“display block 间隙”查找解决方法,此处不再赘述。

本文《css实现正方形,即宽度为百分比,高度与宽度相同的布置方式》来自 www.juwends.com ,欢迎转载或CV操作,但请注明出处,谢谢!