css如何实现比率框

css如何实现比率框

这篇文章主要介绍了css如何实现比率框,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

比率框

css如何实现比率框

要创建具有固有比率的框,您需要做的就是将顶部或底部填充应用于div:

.container{height:0;padding-bottom:20%;position:relative;}.containerdiv{border:2pxdashed#ddd;height:100%;left:0;position:absolute;top:0;width:100%;}

使用20%进行填充使得框的高度等于其宽度的20%。无论视口的宽度如何,子div都将保持其纵横比(100%/ 20%= 5:1)。

感谢你能够认真阅读完这篇文章,希望小编分享的“css如何实现比率框”这篇文章对大家有帮助,同时也希望大家多多支持恰卡编程网,关注恰卡编程网行业资讯频道,更多相关知识等着你来学习!

发布于 2022-03-17 21:21:09
收藏
分享
海报
0 条评论
26
上一篇:JavaScript中怎么重新定义变量 下一篇:JavaScript局部变量与全局变量的作用域是什么
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码