那么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的嵌套。不过方法一的兼容更好
原文地址:https://blog.51cto.com/14284898/2381519
时间: 2024-10-29 21:21:19