使用CSS新特性aspect-ratio保持图片宽高比

使用CSS新特性aspect-ratio保持图片宽高比

一、aspect-ratio兼容性

浏览器	版本
chrome	88↑
edge	↑
safairi	118↑
firefox	81↑

二、aspect-ratio保持图片宽高比

• html

• css

.image {
  width: 100%;  // 确定宽度
  aspect-ratio: 16/9;  // 设置宽高比
  object-fit: cover;  // 设置图片显示裁剪类型
}

三、padding-top方式保持图片宽高比

• html

• 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%