纵横比

纵横比

用于控制元素纵横比的工具。

Class Styles

Class	Styles
`aspect-<ratio>`	`aspect-ratio: <ratio>;`
`aspect-square`	`aspect-ratio: 1 / 1;`
`aspect-video`	`aspect-ratio: var(--aspect-ratio-video); /* 16 / 9 */`
`aspect-auto`	`aspect-ratio: auto;`
`aspect-(<custom-property>)`	`aspect-ratio: var(<custom-property>);`
`aspect-[<value>]`	`aspect-ratio: <value>;`

aspect-<ratio>

aspect-ratio: <ratio>;

aspect-square

aspect-ratio: 1 / 1;

aspect-video

aspect-ratio: var(--aspect-ratio-video); /* 16 / 9 */

aspect-auto

aspect-ratio: auto;

aspect-(<custom-property>)

aspect-ratio: var(<custom-property>);

aspect-[<value>]

aspect-ratio: <value>;

示例

使用 aspect-<ratio> 工具，如 aspect-3/2，为元素设置特定的纵横比：

调整示例大小以查看预期效果

使用 aspect-video 工具为视频元素设置 16 / 9 纵横比：

调整示例大小以查看预期效果

<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Use the aspect-[<value>] syntax to set the 纵横比 based on a completely custom value:

<img class="aspect-[calc(4*3+1)/3] ..." src="/img/villas.jpg" />

For CSS variables, you can also use the aspect-(<custom-property>) syntax:

<img class="aspect-(--my-aspect-ratio) ..." src="/img/villas.jpg" />

This is just a shorthand for aspect-[var(<custom-property>)] that adds the var() function for you automatically.

Prefix an aspect-ratio utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<iframe class="aspect-video md:aspect-square ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Learn more about using variants in the variants documentation.

Use the --aspect-* theme variables to customize the 纵横比 utilities in your project:

@theme {
  --aspect-复古: 4 / 3; 
}

Now the aspect-复古 utility can be used in your markup:

<iframe class="aspect-复古" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Learn more about customizing your theme in the theme documentation.