- 使用
padding-bottom
代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# HTML <div class="wrapper"> <div class="intrinsic-aspect-ratio-container"></div> </div> # CSS .wrapper { width: 40vw; } .intrinsic-aspect-ratio-container { width: 100%; height: 0; padding-bottom: 75%; background-color: lightsalmon; } |
效果如下
2. 使用aspect-ratio属性指定元素宽高比
代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* 高度随动 */ .box1 { width: 100%; height: auto; aspect-ratio: 16/9; } /* 宽度随动 */ .box2 { height: 100%; width: auto; aspect-ratio: 16/9; } |
本着互联网开源、开放的精神和宗旨，本站所有内容可以随便传播。如需转载或分享无需说明来源。
有任何疑问或烦恼，欢迎评论区讨论。
808
暂无回复数据