跳到主要内容

aspect-ratio

2023年07月13日
柏拉文
越努力,越幸运

一、认识


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

二、语法


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

/* 全局值 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

2.1 aspect-ratio: auto

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

2.2 aspect-ratio: [ratio]

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