使用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%

你可能感兴趣的:(使用CSS新特性aspect-ratio保持图片宽高比)