aspect-ratio

Baseline 已广泛支持

此功能已成熟,并可在多种设备和浏览器版本上运行。自 2021 年 9 月起,所有浏览器均已支持此功能。

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

为了让 aspect-ratio 生效,盒子的尺寸至少有一个需要是自动的。如果宽度和高度都不是自动尺寸,则提供的宽高比对盒子的首选尺寸没有影响。

试一试

aspect-ratio: auto;
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;
<section id="default-example">
  <img
    class="transition-all"
    height="640"
    id="example-element"
    src="/shared-assets/images/examples/plumeria.jpg"
    width="466" />
</section>
#example-element {
  height: 100%;
  width: auto;
}

语法

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> 一起指定时,如果元素是具有自然宽高比的替换元素(如 <img> 元素),则使用 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 Box Sizing Module Level 4
# aspect-ratio

浏览器兼容性

另见