布局
用于控制元素纵横比的实用工具。
类 | 样式 |
---|---|
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 的纵横比
调整示例大小以查看预期行为
使用 aspect-[<value>]
语法 来设置纵横比基于完全自定义的值
<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-*
主题变量自定义项目中的纵横比 实用工具
@theme { --aspect-retro: 4 / 3; }
现在 aspect-retro
实用工具可以在您的标记中使用
<iframe class="aspect-retro" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
在 主题文档.