那么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的嵌套。不过方法一的兼容更好
这里推荐一下我的前端技术分享群:731771211,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。
点击:
加入