那么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的左顶点定位.
对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来,正因为我不是211,985,只是个普通的本科生,英语不是特别好,数学不是特别好。所以我选择了前端。工作第六个年头了,我庆幸自己选择了这条路。767-273-102 秋裙。在鹅厂做过,跟着创业头子混过。想把自己的技术分享给大家,如果你还在迷茫,也希望能进我一些绵薄之力,帮助到你。都是一群有梦想的人,我们可能在不同的城市,但我们会一起结伴同行前端前端前端
方式二:利用伪元素
<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的嵌套。不过方法一的兼容更好