如何使用CSS绘制一个响应式的矩形
如何使用CSS绘制一个响应式的矩形
背景：
最近因为需要用到绘制类似九宫格的需求，所以研究了一下响应式矩形的实现方案。
有如下几种方案：
- 使用js来设置元素的高度
- 使用vw单位
div {width: 50vw; height: 50vw;} - 使用伪元素设置padding的方式来实现正方形（也就是本次使用的方式）
实现一个正方形
.square {
position: relative;
width: 100%;
&::before {
content: '';
display: block;
padding-top: 100%;
}
}<div class="square"></div>我们的做法就是使用伪元素的padding-top: 100%来撑开元素本身。
因为pading-top与padding-bottom的百分比取值来自于元素的宽度，所以，设置值为100%就实现了我们想要的功能。
实现更多的功能
想要实现更多比例的形状，其实就是修改::before中的pading-top或者padding-bottom的值即可。
// 16: 9
.square::before {
padding-top: (9 / 16 * 100%);
}
// 4: 3
.square::before {
padding-top: (3 / 4 * 100%);
}
// 1: 2
.square::before {
padding-top: 200%;
}当然，上边的实现都只是一个简单的矩形，如果你的矩形里边还要有一些内容的话，需要给元素添加以下几个属性：
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}<div class="square">
<div class="content">
Awesome
</div>
</div>要注意的有以下几点：
- IE7-不支持
- 元素不要设置
height以及overflow: hidden
参考资料
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录