css实现保持div的等宽高比
2021-01-19 18:11
标签：pre bottom ref 推荐 表示 允许 宽高 通过 创建 这篇文章主要为回答这个问题：“做响应式网页，如何让一个div的高和宽保持比例放大或是缩小？”，这里不介绍媒体查询的实现。 那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。 下面以高宽 2:1 为例，通过2种方式来实现这种效果。 说明：其中奥妙就在于padding-bottom:20%, padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的div呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位. 新片场https://www.wode007.com/sites/73286.html 傲视网https://www.wode007.com/sites/73285.html 该方法来自：30 Seconds of css。 padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。200% 因此表示元素的高度始终为200% 的宽度，创建一个响应正方形。 此方法还允许内容正常放置在元素内部。 二种方式实现的效果都一样，大家可以试一下，调整浏览器窗口的大小以查看元素的比例保持不变。 个人推荐使用方法二，这样可以减少div的嵌套。不过方法一的兼容更好 css实现保持div的等宽高比 标签：pre bottom ref 推荐 表示 允许 宽高 通过 创建 原文地址：https://www.cnblogs.com/ypppt/p/13333815.html方式一：利用定位实现
.wrapper{
position : relative;
background: #ccc;
width: 10%;
padding-bottom : 20%;
}
.inner{
position : absolute;
top : 0; left : 0; right : 0; bottom : 0;
}
方式二：利用伪元素
总结：