CSS 纵横比属性 --- aspect-ratio

什么是 aspect-ratio?

需求：对于一个响应式的网站，在缩放的时候，需要保持图片和视频的纵横比

传统的 CSS 只能通过 宽高自己计算纵横比，或者 保持原始纵横比.
现在可以使用 aspect-ratio 属性来设置固定的纵横比.

aspect-ratio

CSS aspect-ratio 属性接收以 "/" 分隔的两个数字作为属性值，分别代表宽度和高度的比例，例如 16 / 9 表示 16:9 的纵横比， 5 / 4 表示 5:4 的纵横比：

aspect-ratio: 16 / 9;  // 纵横比为 16:9
aspect-ratio: 5 / 4;  // 纵横比为 5:4

"/" 和后面的高度比可以省略，默认为 1 ：

aspect-ratio: 4;  // 纵横比为 4:1

aspect-ratio 属性值也可以设置为 auto，在缩放的时候，保持一定的纵横比：

	aspect-ratio: auto;  // 保持原有的纵横比

任何一个具有宽高的元素都可以使用它：

div .box {
	aspect-ratio: 5 / 4;
}

---

示例：

准备一个盒子，盒子里面放入图片。无论容器的宽高怎么变化，图片都能保持 1:1 的纵横比

.box {
	width:500px;
	height:500px;
	border:1px solid red;
	resize:both; // 图片容器设置随意缩放
	overflow:auto;
}

.box img {
	max-width:100%;
	max-height:100%;
	aspect-ratio:1 / 1;   // 设置图片的纵横比为 1:1，最大高度和宽度都是容器的 100%，图片不会超出容器
}

---

兼容性：

使用 CSS - aspect-radio 属性，兼容性可以参考该图：