CSS实现元素固定宽高比
概要
最近项目中有遇到一种场景需要元素以固定宽高比且元素的宽度占父元素的固定百分比的情况，简而言之就是元素的宽度是随浏览器而变化，元素的高度是随元素的宽度变化的。
实现方式一：使用aspect-ratio属性
原理
使用css属性aspect-ratio指定宽高比
使用
aspect-ratio 的语法格式如下：
aspect-ratio: <widtu-ratio>/<height-ratio>代码实现
html代码如下：
<body>
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>css代码如下:
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
row-gap: 20px;
column-gap: 20px;
padding: 20px;
}
.card {
aspect-ratio: 1;
background-color: red;
}实现效果
card元素宽高比为1:1
优缺点
优点： 实现简单,便于理解,且没有额外增加dom层级
缺点： 浏览器兼容性不太好,Chrome88或者Edge88或者Firefox89以上才支持
实现方式二：使用padding-bottom属性
原理
垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的
代码实现
html:
<body>
<div class="container">
<div class="card-wrapper">
<div class="card"></div>
</div>
<div class="card-wrapper">
<div class="card"></div>
</div>
<div class="card-wrapper">
<div class="card"></div>
</div>
<div class="card-wrapper">
<div class="card"></div>
</div>
<div class="card-wrapper">
<div class="card"></div>
</div>
<div class="card-wrapper">
<div class="card"></div>
</div>
<div class="card-wrapper">
<div class="card"></div>
</div>
<div class="card-wrapper">
<div class="card"></div>
</div>
<div class="card-wrapper">
<div class="card"></div>
</div>
</div>
</body>css:
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
row-gap: 20px;
column-gap: 20px;
padding: 20px;
}
.card-wrapper {
height: 0;
padding-bottom: 100%;
overflow: hidden;
background-color: blue;
}
.card {
padding-bottom: 100%;
background-color: red;
}实现效果
优缺点
优点： 浏览器兼容性好
缺点： 不易理解且额外增加了一层dom结构