aspect-ratio保持图片宽高比

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

# 一、aspect-ratio兼容性

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

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

html

<img class="image" src="xxx">

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

1
2
3
4
5
6

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

html

<div class="container">
  <img class="image"  src="" alt=""/>
</div>

1
2
3

.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; // 设置图片显示裁剪类型
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

原理：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%

#css

上次更新: 10/21/2021, 1:52:09 PM

← 移动端禁止屏幕缩放 input输入框number类型去除增减→