20. 容器与宽高比

本节目标：学会用 container 限制内容最大宽度、用 aspect-* 固定元素宽高比，以及了解 v4.3 引入的 @container-size 尺寸容器查询。

container：响应式内容宽度

container 类让元素在不同屏幕宽度下有不同的最大宽度，并且自动水平居中（v4 中 container 已经自带居中行为，不需要额外加 mx-auto）。

<div class="container">
  <!-- 内容区，宽度随屏幕变化但有上限 -->
</div>

各断点对应的最大宽度：

断点	最小宽度	max-width
sm	640px	640px
md	768px	768px
lg	1024px	1024px
xl	1280px	1280px
2xl	1536px	1536px

默认情况下（无前缀），container 在 sm 断点及以上才开始限制宽度。小屏幕上宽度 100%。

也可以指定从某个断点开始：

<div class="md:container">
  <!-- 只在中等及以上屏幕限制宽度 -->
</div>

Note

实际使用中 container mx-auto 是经典组合。v4 的 container 会自动居中，但显式写上 mx-auto 也没坏处，代码意图更清晰。

aspect-ratio：固定宽高比

aspect-* 工具类让元素保持特定的宽高比，不管宽度怎么变，高度自动跟着调。

类名	比例
`aspect-auto`	自然比例（默认）
`aspect-square`	1:1
`aspect-video`	16:9

<!-- 正方形容器，宽度自适应，高度自动等于宽度 -->
<div class="aspect-square w-48 bg-blue-200">
  <img src="photo.jpg" class="object-cover w-full h-full">
</div>

<!-- 16:9 视频容器 -->
<div class="aspect-video bg-black">
  <iframe class="w-full h-full" src="..."></iframe>
</div>

Tip

aspect-video + object-cover 是图片缩略图的黄金组合。无论图片原始比例如何，都会被裁剪成 16:9 填满容器。

自定义宽高比

v4 支持任意宽高比，用方括号语法：

<div class="aspect-[4/3]">4:3 比例</div>
<div class="aspect-[21/9]">21:9 超宽比例</div>
<div class="aspect-[3/4]">3:4 竖版比例</div>

也可以在 @theme 中定义自己的比例令牌，然后用 aspect-{name} 使用。

@container-size：尺寸容器查询（v4.3 新特性）

v4.3 引入了 @container-size，让你可以基于容器尺寸（不只是宽度）做响应式设计。

传统容器查询只能查宽度或高度，@container-size 同时创建 block（高度）和 inline（宽度）两个维度的查询能力：

@container-size/small (inline-size: 0px) and (block-size: 300px) {
  .card { /* 窄且高的容器中的样式 */ }
}

配合的查询单位：

单位	含义
`cqi`	容器内联尺寸（宽度）的百分比
`cqb`	容器块尺寸（高度）的百分比
`cqh`	容器高度的百分比
`cqw`	容器宽度的百分比

<div class="@container-size/card">
  <div class="@sm:cqb-[100px]:bg-red-200">
    <!-- 当容器高度 >= 100px 时变红 -->
  </div>
</div>

Note

容器查询还在逐步普及阶段。如果你不需要支持特别老的浏览器（IE 完全不支持），可以放心使用。v4.3 的实现基于原生 CSS 容器查询，性能没问题。

object-fit 配合宽高比

aspect-* 常和 object-fit 一起用，控制图片或视频在固定比例容器内的填充方式：

类名	效果
`object-contain`	保持比例，完整显示，可能有留白
`object-cover`	保持比例，填满容器，可能裁剪
`object-fill`	拉伸填满，不保持比例
`object-none`	原始尺寸，不缩放
`object-scale-down`	取 contain 和 none 中较小的

<div class="aspect-square w-32">
  <img src="avatar.jpg" class="object-cover w-full h-full rounded-full">
</div>

头像裁剪的经典写法：正方形容器 + object-cover + rounded-full。

实际应用：响应式视频嵌入

从 YouTube 或 B 站嵌入视频时，保持 16:9 比例且不溢出：

<div class="aspect-video">
  <iframe 
    class="w-full h-full"
    src="https://www.youtube.com/embed/..." 
    frameborder="0">
  </iframe>
</div>

本节小结

container → 响应式内容宽度上限
mx-auto → 水平居中（常与 container 搭配）
aspect-square / aspect-video → 固定宽高比
aspect-[w/h] → 任意自定义比例
object-* → 内容填充方式
@container-size → v4.3 尺寸容器查询