aspect-ratio

基线 广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本上运行。它自以下时间起在所有浏览器中都可用： 2021年9月.

aspect-ratio CSS 属性允许您定义元素盒子所需的宽高比。这意味着，即使父容器或视口大小发生变化，浏览器也会调整元素的尺寸以保持指定的宽高比。指定的 宽高比 用于自动大小和其他一些布局函数的计算。

至少需要一个盒子的尺寸为自动，才能使 aspect-ratio 产生任何效果。如果宽度和高度都不是自动大小，则提供的宽高比对盒子的首选大小没有影响。

试一试

语法

css
aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* fallback to 'auto' for replaced elements */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

此属性指定为一个或两个关键字 auto 或 <ratio>。如果都给出，并且元素是 替换元素（例如 <img>），则使用给定的比率，直到内容加载完成。内容加载完成后，将应用 auto 值，因此将使用加载内容的固有宽高比。

如果元素不是替换元素，则使用给定的 ratio。

值

auto

具有固有宽高比的 替换元素 使用该宽高比，否则盒子没有首选宽高比。涉及固有宽高比的大小计算始终使用内容盒尺寸。

<ratio>

盒子的首选宽高比是指定的 width / height 比率。如果省略 height 和前面的斜杠字符，则 height 默认为 1。涉及首选宽高比的大小计算使用由 box-sizing 指定的盒子的尺寸。

auto && <ratio>

当同时指定了auto和<ratio>时，如果元素是具有自然纵横比的替换元素，则使用auto。否则，指定的width / height比率将用作首选纵横比。

正式定义

初始值auto
应用于除内联框和内部 ruby 或表格框之外的所有元素
继承否
计算值如指定
动画类型按计算值类型

正式语法

aspect-ratio = 
  auto     ||
  <ratio>  

<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?

示例

使用固定宽度探索纵横比效果

在此示例中，<div>元素的宽度已设置为100px，高度设置为auto。由于此处宽度值是固定的，因此aspect-ratio属性仅影响<div>元素的高度，以保持指定的宽高比。

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;
}

回退到自然纵横比

在此示例中，我们使用了两个<img>元素。第一个元素的src属性未设置为图像文件。

html
<img src="" /> <img src="plumeria.jpg" />

以下代码将3/2设置为首选纵横比，并将auto设置为回退值。

css
img {
  display: inline;
  width: 200px;
  border: 2px dashed red;
  background-color: lime;
  vertical-align: top;

  aspect-ratio: 3/2 auto;
}

请注意，第一个没有替换内容的图像保持3/2的纵横比，而第二个图像在加载内容后使用图像的自然纵横比。

规范

规范
CSS 盒尺寸模块级别 4
# aspect-ratio

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅