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

声明:本站所有文章和图片,如无特殊说明,均为原创发布,转载请注明出处。
随机推荐
HTML input datetime 日期时间选择器
JavaScript BOM 浏览器对象模型
CRSF 跨站脚本攻击已死,使用 Same-Site Cookies 来防范 CSRF
WordPress 文章置顶循环
JavaScript 修改 CSS 样式
SQL 注入
Node.js crypto 模块
JavaScript location对象