03 【布局之Aspect-Ratio Container Box-Decoration-Break Object-Fit Object-Position】

布局之Aspect-Ratio Container Box-Decoration-Break Object-Fit Object-Position】

1.布局-纵横比（Aspect Ratio）

1.1 快速参考

用于控制元素纵横比的实用程序。

1.2 基本用法

1.2.1设置纵横比

使用实用程序设置元素的所需纵横比。aspect-{ratio}

    <iframe
      class="w-full aspect-video"
      src="https://player.bilibili.com/player.html?aid=814174829&bvid=BV1qG4y1v7R9&cid=794450776&page=1"
      scrolling="no"
      border="0"
      frameborder="no"
      framespacing="0"
      allowfullscreen="true"
    >iframe>
1
2
3
4
5
6
7
8
9

可以发现宽高比是16:9

1.2.2 浏览器支持

这些实用程序使用本机 CSS 属性，直到版本 15 才在 Safari 中支持该属性。在Safari 15普及之前，Tailwind的宽高比插件是一个不错的选择。aspect-{ratio}``aspect-ratio

1.3 有条件地应用

1.3.1 悬停、焦点和其他状态

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

    <iframe
      class="w-full aspect-video hover:aspect-square"
      src="https://player.bilibili.com/player.html?aid=814174829&bvid=BV1qG4y1v7R9&cid=794450776&page=1"
    >iframe>
1
2
3
4

有关所有可用状态修饰符的完整列表，请查看 Hover、Focus 和 Other State 文档。

移入后

移入后宽高比变成1:1

1.3.2 断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，如响应式断点、深色模式、首选减少运动等。例如，用于仅在中等屏幕尺寸及以上位置应用该实用工具。md:aspect-square``aspect-square

    <iframe
      class="w-full aspect-video md:aspect-square"
      src="https://player.bilibili.com/player.html?aid=814174829&bvid=BV1qG4y1v7R9&cid=794450776&page=1"
      scrolling="no"
    >iframe>
1
2
3
4
5

这时在md屏幕以上宽高比为1:1

这时在md屏幕以下宽高比变为我们设置的16:9

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

1.4 使用自定义值

1.4.1 自定义主题

默认情况下，Tailwind 提供最少的一组实用程序。您可以通过编辑或在文件中自定义这些值。aspect-ratio``theme.aspectRatio``theme.extend.aspectRatio``tailwind.config.js

tailwind.config.js

module.exports = {
   
  theme: {
   
    extend: {
   
      aspectRatio: {
   
        '4/3': '4 / 3',
      },
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

有关自定义默认主题的详细信息，请参阅主题自定义文档。

1.4.2 任意值

如果需要使用一次性值，而该值在主题中没有意义，请使用方括号使用任意值动态生成属性。aspect-ratio

    <iframe
      class="w-full aspect-[4/3]"
      src="https://player.bilibili.com/player.html?aid=814174829&bvid=BV1qG4y1v7R9&cid=794450776&page=1"
    >iframe>
1
2
3
4

有关任意值支持的详细信息，请参阅任意值文档。

这时宽高比变成了我们设置的4:3

2.布局-容器（Container）

2.1 快速参考

容器根据当前断点固定元素宽度的组件。

container类设置一个元素的 max-width 来匹配当前断点的 min-width。container对应的尺寸如下：

举个例子：如果现在屏幕宽度是800px（768px-1024px），这时设置了container元素的宽度为768px

2.2 使用方法

container 类设置一个元素的 max-width 来匹配当前断点的 min-width。如果您想为一组固定的屏幕尺寸设计，而不是试图适应一个完全流动的视窗，这很有用。

注意：Tailwind CSS容器不会自动居中，居中需要使用 mx