CSS 如何实现固定宽高比？

Category（分类）: CSS Status: 已整理

如果面试中被问到“如何实现一个固定宽高比的元素”，不要急着只回答一个属性。这个问题还需要先确认几个条件：

• 元素是 <img>、<video> 这样的可替换元素，还是普通 div？
• 比例是由内容本身决定，还是需要强制使用指定比例？
• 宽度固定后高度自适应，还是高度固定后宽度自适应？
• 是否允许内容溢出或裁剪？
• 是否需要兼容不支持现代 CSS 的旧浏览器？

如果元素尺寸已经确定，直接计算宽度和高度即可。本文重点讨论元素尺寸未知时，如何使用替换元素自身的比例、百分比 padding 和现代 aspect-ratio 实现固定宽高比。

一、什么是宽高比？

宽高比通常写作：

宽度 / 高度

例如：

• 16 / 9：常见视频比例；
• 4 / 3：传统显示器和图片比例；
• 1 / 1：正方形；
• 10 / 1：非常扁的横幅。

aspect-ratio 的值也按照宽度在前、高度在后的顺序书写：

.box {
  aspect-ratio: 16 / 9;
}

二、可替换元素实现固定宽高比

可替换元素（replaced element）包括 <img>、<video>、<iframe> 等。它们通常具有固有宽度、固有高度和固有宽高比，浏览器可以根据其中一个尺寸推导另一个尺寸。

1. 图片宽度自适应，高度自动计算

<div class="image-wrapper">
  <img src="images/aspect-ratio-13.jpg" alt="宽高比示例图片">
</div>

.image-wrapper {
  width: 50vw;
  margin: 100px auto;
  padding: 10px;
  border: 5px solid lightsalmon;
  font-size: 0;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

当图片宽度随容器变化时，height: auto 会根据图片的固有宽高比计算高度，因此图片通常会保持原始比例。

height: auto 可以避免 CSS 中固定高度破坏图片的固有比例，但它并不是无条件修复所有图片尺寸问题。对于页面布局，还可以在 HTML 中提供准确的 width 和 height 属性，帮助浏览器提前预留空间，减少布局偏移。

2. 视频元素

视频也可以使用类似方式：

<video
  class="video"
  controls
  preload="metadata"
  src="example.mp4"
></video>

.video {
  display: block;
  width: 100%;
  height: auto;
}

视频的固有比例通常要等元数据加载后才能确定。如果需要在视频加载前就固定外框比例，可以使用容器和 aspect-ratio：

.video-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-wrapper video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. 图片使用指定比例而不是原始比例

如果图片本身是 4:3，但设计要求使用 16:9 的图片框，不能只设置 height: auto。可以让容器负责比例，让图片填充容器：

<div class="image-box">
  <img src="images/aspect-ratio-13.jpg" alt="裁剪到固定比例的图片">
</div>

.image-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

• object-fit: cover：保持图片比例并填满容器，可能裁剪图片；
• object-fit: contain：保持图片完整，可能留下空白；
• object-fit: fill：拉伸图片填满容器，可能破坏原始比例。

三、普通元素使用百分比 padding

在 aspect-ratio 普及之前，常用的方案是利用一个规则：

对普通块盒来说，垂直方向的百分比 padding-top 和 padding-bottom 通常根据包含块的宽度计算，而不是根据包含块的高度计算。

因此可以把宽度的一定百分比作为高度，模拟固定宽高比。

1. 使用 padding-bottom 模拟比例

以 4:3 为例，高度应为宽度的 75%：

<div class="wrapper">
  <div class="padding-ratio-box"></div>
</div>

.wrapper {
  width: 40vw;
}

.padding-ratio-box {
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  background-color: lightsalmon;
}

height: 0 让内容高度归零，再利用 padding-bottom: 75% 撑出高度，因此内容区域大致为 4:3。

这个方案有几个注意点：

• 垂直百分比 padding 根据包含块宽度计算；
• padding、border 和 box-sizing 可能影响最终外框比例；
• 子元素如果处于普通流中，会影响容器高度；
• 容器本身没有方便的内容高度，需要额外处理内部内容。

如果需要设置其他比例，可以计算高度占宽度的百分比。例如 33:17：

.padding-ratio-box {
  padding-bottom: 51.5152%;
}

也可以在目标浏览器支持相应数学运算时使用：

.padding-ratio-box {
  padding-bottom: calc(17 / 33 * 100%);
}

为了兼容较旧的浏览器，直接写计算后的百分比更稳妥。

2. 在固定比例容器中填充内容

由于外层容器的高度主要由 padding 撑出，内容不能简单地放在普通流中。传统方案是让容器建立定位包含块，再让内容绝对定位填满容器：

<div class="padding-content-box">
  <div class="content">
    固定比例容器中的内容
  </div>
</div>

.padding-content-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  background-color: lightsalmon;
}

.padding-content-box .content {
  position: absolute;
  inset: 0;
  overflow: auto;
}

原文中 HTML 使用了 .intrinsic-aspect-ratio-container，但 CSS 使用了 .intrinsic-aspect-ratio，类名不一致会导致定位规则无法应用，这里已统一。

这种 padding hack 可以实现高度随宽度变化，但它天然是以包含块宽度为计算基础，不能像现代 aspect-ratio 那样自然地处理宽度随高度变化的场景。

四、使用 aspect-ratio 指定宽高比

aspect-ratio 已经是现代 CSS 的正式属性，现代主流浏览器普遍支持，不再是“尚未实现的编辑草案”。它用于向尺寸计算提供一个首选宽高比：

.box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: deepskyblue;
}

.square {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: lightgreen;
}

如果要兼容非常旧的浏览器，可以使用特性查询：

@supports not (aspect-ratio: 1) {
  .box {
    height: 0;
    padding-bottom: 56.25%;
  }
}

1. 指定宽度，高度随比例计算

.box {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

当宽度是确定值、高度是自动值时，浏览器可以根据 16 / 9 推导高度。

2. 指定高度，宽度随比例计算

.box {
  height: 100px;
  width: auto;
  aspect-ratio: 16 / 9;
}

在父级尺寸、布局模式和其他约束允许的情况下，浏览器可以根据高度推导宽度。使用百分比高度时，父元素必须有明确的高度：

.parent {
  height: 300px;
}

.box {
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
}

3. 内容过多时的表现

aspect-ratio 是尺寸计算中的首选比例，并不是无条件的硬性裁剪规则。如果内容的最小尺寸、父级约束或布局算法要求更大的尺寸，最终尺寸可能不再严格符合指定比例；在某些场景中内容也可能溢出。

例如：

.box {
  width: 100%;
  aspect-ratio: 10 / 1;
  background: deepskyblue;
}

如果内容非常多，应先决定设计目标：

• 允许容器增高：不要强制固定外框比例；
• 固定外框并裁剪：使用 overflow: hidden；
• 固定外框并滚动：使用 overflow: auto；
• 内容位于独立区域：让内部内容占满比例容器。

.box {
  width: 100%;
  aspect-ratio: 10 / 1;
  overflow: auto;
}

在 Flex 或 Grid 布局中，子项的自动最小尺寸有时会阻止它收缩。此时可以在确实需要时设置：

.flex-item,
.grid-item {
  min-width: 0;
  min-height: 0;
}

min-height: 0 不是让 aspect-ratio 获得更高的 CSS 优先级，而是取消某些布局场景下的自动最小尺寸限制。它也不能保证内容永远不会溢出。

五、aspect-ratio 与 width、height 的关系

1. 两个尺寸都为自动值

如果宽度和高度都没有明确的可用尺寸，单独设置 aspect-ratio 不能凭空决定元素的最终大小。它需要至少有一个尺寸、父级可用空间或其他布局规则作为基础。

.box {
  aspect-ratio: 16 / 9;
}

对普通块级元素来说，宽度通常由父级可用空间决定，之后高度可以依据比例计算；但具体结果仍受布局上下文影响。

2. 只设置一个尺寸

.box {
  aspect-ratio: 10 / 1;
  height: 30px;
  width: auto;
}

如果没有 max-width、内容和父级空间等其他限制，宽度可能根据比例计算为 300px。

3. 同时设置两个尺寸

.box {
  width: 300px;
  height: 100px;
  aspect-ratio: 10 / 1;
}

当 width 和 height 都是明确值时，元素的直接尺寸由这两个值决定，aspect-ratio 不会把它们强行改成其他尺寸。

更准确地说，aspect-ratio 在这里不参与这两个明确尺寸的直接推导，并不代表这个属性在所有相关布局计算中都完全不存在。

六、aspect-ratio 与 min/max-width/height

min-width、max-width、min-height 和 max-height 不是一个可以简单背诵的固定优先级列表，而是对尺寸计算结果施加约束。

例如：

.box {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 10 / 1;
  background: deepskyblue;
}

如果内容和其他条件没有造成额外限制，元素宽度最大为 240px，高度可以根据比例计算为 24px。

如果同时设置了高度：

.box {
  height: 30px;
  max-width: 240px;
  aspect-ratio: 10 / 1;
  background: deepskyblue;
}

比例根据高度希望得到 300px 宽度，但 max-width: 240px 会限制宽度，因此最终尺寸可能是 240px × 30px，实际比例不再是 10:1。

这说明 aspect-ratio 是尺寸计算中的比例建议，仍然会受到最小值、最大值、内容和父级空间限制。

七、替换元素、HTML 尺寸属性与 aspect-ratio

对于图片等替换元素，应注意固有尺寸、HTML 属性和 CSS 声明之间的关系：

<img
  class="img-size"
  src="images/aspect-ratio-13.jpg"
  width="256"
  height="192"
  alt="示例图片"
>

.img-size {
  aspect-ratio: 1 / 1;
}

这里的 width 和 height 都提供了明确尺寸，因此 aspect-ratio 不会简单地把图片改成 1:1。不能把结果概括为“HTML 属性优先级高于 CSS 属性”，实际结果还涉及层叠、替换元素固有尺寸以及两个尺寸都已明确等因素。

如果想创建一个固定的正方形图片框，应让容器控制尺寸，并让图片通过 object-fit 填充：

.img-frame {
  width: 256px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

八、常见实现方式对比

九、常见问题

1. 为什么设置了 aspect-ratio 但比例没有生效？

可以按以下顺序检查：

• width 和 height 是否同时设置了明确值；
• 是否存在 min-width、max-width、min-height 或 max-height；
• Flex/Grid 子项是否受到自动最小尺寸限制；
• 内容是否导致最小尺寸增大；
• 父级百分比高度是否有明确的高度来源；
• 图片或视频是否被 object-fit、内联尺寸或其他 CSS 覆盖；
• 是否有旧浏览器不支持该属性。

2. 为什么图片比例和容器比例不一样？

如果图片使用：

width: 100%;
height: auto;

它会保持自身固有比例。如果希望适配容器比例，应改为：

width: 100%;
height: 100%;
object-fit: cover;

并让父容器设置 aspect-ratio。

3. aspect-ratio 是不是硬性固定尺寸？

不是。它是首选宽高比，尺寸仍会受到明确宽高、最小/最大尺寸、内容、布局模式和父级空间影响。如果需要严格的视觉外框，应配合 overflow 和内部内容布局。

十、总结

• 元素尺寸确定时，直接设置宽高即可；
• <img> 和 <video> 通常可以设置一个尺寸，另一个使用 auto，保持固有比例；
• 如果图片需要使用与原图不同的比例，应使用 aspect-ratio 容器和 object-fit；
• 百分比 padding-top/padding-bottom 可以模拟“高度随宽度变化”，但需要处理空容器和绝对定位内容；
• aspect-ratio 是现代 CSS 中实现固定宽高比的首选方案；
• aspect-ratio 可以在尺寸约束允许时根据宽度或高度推导另一尺寸；
• 同时明确设置 width 和 height 时，比例不会覆盖这两个明确尺寸；
• min/max、内容、Flex/Grid 自动最小尺寸和父级空间都可能影响最终比例；
• min-height: 0 只是解除部分布局场景的自动最小尺寸限制，不是提升属性优先级；
• 使用旧版 padding hack 时，要注意百分比 padding 的计算基准、box-sizing、边框和内容定位；
• 现代项目优先使用 aspect-ratio，需要兼容旧环境时再提供 padding fallback。

参考资料

• MDN：aspect-ratio
• MDN：CSS box sizing
• MDN：object-fit
• CSS Sizing Module Level 4
• CSS 百分比 padding 实现比例固定图片自适应布局
• aspect-ratio 相关特性测试 Demo