aspect-ratio

快速参考

示例

基本示例

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

<img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />

使用视频纵横比

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

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

使用自定义值

使用 aspect-[<value>] 语法基于完全自定义的值设置 aspect-ratio：

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

对于 CSS 变量，你还可以使用 aspect-(<custom-property>) 语法：

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

这只是 aspect-[var(<custom-property>)] 的简写形式，它会自动为你添加 var() 函数。

响应式设计

为 aspect-ratio 工具类添加断点变体的前缀（如 md:），以便仅在中等屏幕尺寸及以上应用该工具类：

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

在 变体文档 中了解更多关于使用变体的信息。

自定义你的主题

使用 --aspect-* 主题变量自定义项目中 aspect ratio 工具类：

@theme {
  --aspect-retro: 4 / 3;
}

现在可以在你的标记中使用 aspect-retro 工具类：

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

在 主题文档 中了解更多关于自定义主题的信息。