css 设置图片的等比例宽高比

Aspect ratio

长宽比最常见的表示方式是两个整数和一个冒号，尺寸为：宽：高，或x：y。摄影最常见的长宽比是4:3和3:2，而视频和最近的消费类相机则倾向于16:9的长宽比。

aspect-ratio CSS 媒体属性 可以用来测试 viewport 的宽高比。

语法

宽高比属性被指定为<ratio>值来代表 viewport 的宽高比。其为一个范围，这意味着你可以使用 min-aspect-ratio 和 max-aspect-ratio 分别查询最小和最大的值。

示例

HTML

<div id="inner">
  Watch this element as you resize your viewport's width and height.
</div>

/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /* cyan */
  }
}

/* 明确的宽高比，放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

常用换算

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

使用aspect-ratio的好处是：

1. 不需要在套一层div,只需要指定高度/宽度的值就可以。
2. 可以指定高度具体的值，而使用padding-top/bottom咋无法指定高度的值。
3. 你也可以不指定宽和高的值，此时是按照宽度来保持宽高比。

其实实现定宽高比的方案有很多，本文简单的介绍了三种，当然aspect-ratio应该是当之无愧的神，而且最简单的，适用场景最多的。随着兼容性好起来，aspect-ratio会逐渐取代其他方案。