aspect-ratio
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;
}
语法
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
比例作为首选宽高比。
正式定义
正式语法
aspect-ratio =
auto ||
<ratio>
<ratio> =
<number [0,∞]> [ / <number [0,∞]> ]?
示例
探索固定宽度下的宽高比效果
在此示例中,<div>
元素的宽度已设置为 100px
,高度设置为 auto
。由于宽度值在此处是固定的,因此 aspect-ratio
属性仅影响 <div>
元素的高度,以保持指定的宽高比。
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
属性设置为图像文件。
<img src="" /> <img src="plumeria.jpg" />
以下代码将 3/2
设置为首选宽高比,并将 auto
设置为回退。
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 |
浏览器兼容性
加载中…