Div保持高宽比

padding百分比来做

这里需要运用一个小技巧,padding用百分比做单位时是相对于容器的宽度来算的。
.wrapper{
  position : relative;
  background: #ccc;
  width: 10%;
  padding-bottom : 20%;
}
.inner{
  position : absolute;
  top : 0; left : 0; right : 0; bottom : 0;
}
</style>
<div class="wrapper">
    <div class="inner">
        这是内容
    </div>
</div>

此时,.wrapper就是高宽比固定的。 这个时候,可以使用 position:absolute,往页面中添加内容。

修改时间 2019-03-10

真诚赞赏,手留余香
赞赏
随机推荐
Bootstrap 3.7 导航组件响应式CSS样式
Wordpress 增加文章阅读次数或点赞次数(非插件实现)
Express.js 日志模块
php解析模板路径
MacOS终端下无法输入大写字母“T”
Windows系统下Apache性能优化,提高并发 mod_mpm
RESTful就是个骗局 (蛤蛤)
Koa.js 中间件 koa-body
JavaScript中函数参数的值传递和引用传递
input上选择同一文件change事件不生效