aspect-ratio

CSS 属性 aspect-ratio 为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。1

演示

取值

参数

auto: 具有固有纵横比的可替换元素将使用此纵横比，否则盒子无首选纵横比。涉及固有纵横比的尺寸计算始终使用内容盒的尺寸。

<ratio>: 盒子的首选纵横比为指定的 width / height 比率。如果省略 height 和前面的斜杠字符，则 height 默认为 1。涉及首选纵横比的尺寸计算使用由 box-sizing 所指定的盒子的尺寸。

点击查看代码案例

css

div {
  width: 100px;
  height: auto;
}
div:nth-child(1) {
  aspect-ratio: 1/1;
}
div:nth-child(2) {
  aspect-ratio: 0.5;
}
div:nth-child(3) {
  aspect-ratio: 1;
}
div:nth-child(4) {
  aspect-ratio: 1/0.5;
}
div:nth-child(5) {
  aspect-ratio: 16/9;
}

效果演示：https://developer.mozilla.org/en-US/play

浏览器兼容性

参考

[1] aspect-ratio | MDN

aspect-ratio ​

演示 ​

取值 ​

浏览器兼容性 ​

参考 ​

aspect-ratio

演示

取值

浏览器兼容性

参考