那么 CSS 如何实现高度 height 随宽度 width 变化保持比例不变呢? 即给定可变宽度的元素, 它将确保其高度以响应的方式保持成比例 (即, 其宽度与高度的比率保持恒定).
下面以高宽 2:1 为例, 通过 2 种方式来实现这种效果.
方式一: 利用定位实现
- .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>
说明: 其中奥妙就在于 padding-bottom:20%, padding-bottom 是相对宽度的. 也就是整个 Wrapper 的高度等于 padding-bottom 的高度, Wrapper 没有内容高度. 没有内容高度如何往其中放置我们准备的 DIV 呢? 答案是 绝对定位, 所以 Wrapper 的样式中有 position:relative, 方便子元素相对 Wrapper 的左顶点定位.
方式二: 利用伪元素
- <style>
- .wrapper {
- background: #ccc;
- width: 10%;
- }
- .wrapper::before {
- content: '';
- padding-top: 200%;
- float: left;
- }
- .wrapper::after {
- content: '';
- display: block;
- clear: both;
- }
- </style>
- <div class="wrapper">
这是内容
</div>
padding-top 在... 上::before 伪元素使元素的高度等于其宽度的百分比. 200% 因此表示元素的高度始终为 200% 的宽度, 创建一个响应正方形. 此方法还允许内容正常放置在元素内部.
总结
二种方式实现的效果都一样, 大家可以试一下, 调整浏览器窗口的大小以查看元素的比例保持不变.
个人推荐使用方法二, 这样可以减少 div 的嵌套. 不过方法一的兼容更好
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/a77433ad3936