css如何实现宽度不固定的容器，要求其高度等于宽度
因移动设备屏幕尺寸不一致，为兼容不同的设备，我们一般用响应式布局。那么问题来了，有这样个需求：一个容器（div），宽度为可视区域的80%，要求其高度等于宽度。通常我的做法，是用js实现：先获取容器的宽度值，然后把该值赋值给容器的高度。这并没有多大难度，有难度的是知道怎样用css实现该功能。接下来是重点了，不要离开哈，继续往下看。答案很简单：容器的padding 比例值是相对于容器的...
·
因移动设备屏幕尺寸不一致，为兼容不同的设备，我们一般用响应式布局。那么问题来了，有这样个需求：一个容器（div），宽度为可视区域的80%，要求其高度等于宽度。
通常我的做法，是用js实现：先获取容器的宽度值，然后把该值赋值给容器的高度。
这并没有多大难度，有难度的是知道怎样用css实现该功能。
接下来是重点了，不要离开哈，继续往下看。
答案很简单：容器的padding 比例值是相对于容器的宽度值来计算的，在宽度不固定的情况下，要实现宽高相等或固定比例，用padding-bottom:*%，即可实现。
示例：实现宽高相当
//html结构：
<div class="box"></div>
//css样式：
.box{
width:100%;
padding-bottom:100%;
border:solid 1px red;
}
实现效果如下图所示：
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)