menu Littleor's Blog
search
close
非固定宽高百分比布局设置宽高比纯CSS
119 浏览 | 0 评论

最近遇到个小问题一直不知道怎么解决,就是如何在百分比布局中高度用宽度的百分比.
即:

<div class='demo'></div>

.demo{
width: 100%;
height: auto;
}

这种时候height是根据本身高度自动调整的,那么如何做到height和width成比呢?
接下来就要介绍下百分比布局的一些细节了:
所谓的padding-bottom:100%中百分比是按宽度来算的而不是高度,故可以借此来实现百分比布局宽高成比例.
如下:

<div class='demo'></div>

.demo{
width: 100%;
padding-bottom: 100%;
}
本文作者:小明
本文链接:https://www.sixming.com/index.php/archives/63/
最后修改时间:2020-04-27 20:59:45
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!

评论

textsms
支持Markdown语法
email
link

mode_comment 全部评论 暂无评论(;´д`)ゞ