Aspect Ratio 宽高比

控制元素宽高比的实用工具。

Class	Properties

基本用法

使用 aspect-{ratio} 实用工具来设置元素的所需宽高比。

html

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

Tailwind 不会在开箱即用时包含大量的宽高比值，因为使用任意值更容易。有关更多信息，请参阅任意值部分。

这些 aspect-{ratio} 实用程序使用本机 aspect-ratio CSS 属性，直到 Safari 15 普及之前，这个属性在 Safari 中是不受支持的。因此，Tailwind 的 aspect-ratio 插件是一个很好的替代方案。

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:aspect-square 仅在悬停时应用 aspect-square 实用程序。

html

<iframe class="w-full aspect-video hover:aspect-square" src="https://www.youtube.com/..."></iframe>

要查看所有可用状态修饰符的完整列表，请查看悬停、焦点和其他状态文档。

您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:aspect-square 仅在中等屏幕尺寸及以上应用 aspect-square 实用程序。

html

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

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。

默认情况下，Tailwind 提供了一组最小化的 aspect-ratio 实用工具。您可以通过编辑您的 tailwind.config.js 文件中的 theme.aspectRatio 或 theme.extend.aspectRatio 来自定义这些值。

tailwind.config.js

module.exports = {
	theme: {
		extend: {
			aspectRatio: {
				'4/3': '4 / 3',
			},
		},
	},
}

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

如果您需要使用一个与主题无关的 aspect-ratio 值，可以使用方括号来根据任意值动态生成属性。

html

<iframe class="w-full aspect-[4/3]" src="https://www.youtube.com/..."></iframe>

在任意值文档中了解更多关于任意值支持的信息。