使用CSS新特性aspect-ratio保持图片宽高比
一、aspect-ratio兼容性
| 浏览器 | 版本 |
|---|---|
| chrome | 88↑ |
| edge | ↑ |
| safairi | 118↑ |
| firefox | 81↑ |
二、aspect-ratio保持图片宽高比
- html
<img class="image" src="xxx">
- css
.image {
width: 100%; // 确定宽度
aspect-ratio: 16/9; // 设置宽高比
object-fit: cover; // 设置图片显示裁剪类型
}
三、padding-top方式保持图片宽高比
- html
<div class="container">
<img class="image" src="" alt=""/>
</div>
- css
.container {
position: relative;
width:100%;
padding-top: 56.25%; // 16/9
overflow: hidden; // 隐藏溢出
}
.image {
display: block;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
object-fit: cover; // 设置图片显示裁剪类型
}
原理：padding-top百分比是比照container元素的宽度进行计算的，使用padding-top百分比将container容器撑开。子元素img再使用绝对布局适配。父元素隐藏掉溢出部分。
四、常用比例padding-top对照
1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%
4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%
| 宽高比 | padding-top |
|---|---|
| 1:1 | 100% |
| 4:3 | 75% |
| 3:2 | 66.67% |
| 16:9 | 56.25% |
