那么css如何实现高度高度随宽度宽度变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。
下面以高宽2:1为例,通过2种方式来实现这种效果。
<前> .wrapper { position 才能:相对; ,,背景:# ccc; ,,宽度:10%; padding-bottom 才能:20%; } 在{ position 才能:绝对; top 才能:0;,left :, 0;, right , 0;, bottom :, 0; } & lt;/style> & lt; div 类=皐rapper"祝辞 ,,,& lt; div 类=癷nner"比; ,,,,,,,这是内容 ,,,& lt;/div> & lt;/div> 之前
说明:其中奥妙就在于padding-bottom: 20%, padding-bottom是相对宽度的。也就是整个包装器的高度等于padding-bottom的高度,包装没有内容高度。没有内容高度如何往其中放置我们准备的DIV呢?答案是绝对定位,所以包装的样式中有位置:相对的,方便子元素相对包装的左顶点定位。
<前> & lt; style> .wrapper { ,,背景:# ccc; ,,宽度:10%; } .wrapper: before { ,,内容:& # 39;& # 39;; ,,padding-top: 200%; 浮:,才能离开; } .wrapper: after { ,,内容:& # 39;& # 39;; ,,显示:块; ,,明确:两种; } & lt;/style> & lt; div 类=皐rapper"祝辞 ,,,这是内容 & lt;/div> 之前
padding-top在…上:之前伪元素使元素的高度等于其宽度的百分比.200%因此表示元素的高度始终为200%的宽度,创建一个响应正方形。此方法还允许内容正常放置在元素内部。
总结
二种方式实现的效果都一样,大家可以试一下,调整浏览器窗口的大小以查看元素的比例保持不变。
个人推荐使用方法二,这样可以减少div的嵌套,不过方法一的兼容更好
这里推荐一下我的前端技术分享群:731771211,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019年最全面前端学习资料,从最基础的HTML + CSS + JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习网前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。
点击: 加入
css如何保持div等高宽比
