在网页布局中，我们经常会遇到这样的需求：一个容器的宽度随着视口变化，但它需要始终保持例如 16:9 或 1:1 的固定比例，同时里面的图片要完整填满容器、不变形、不出现多余空白。这看似简单，实际写样式时却容易在窄屏上出现图片被压扁或者容器高度塌陷的问题。下面我们从一个基础结构出发，逐步看如何用纯 CSS 解决它。
一、为什么图片会变形或留白
很多初学者会把图片直接放进一个宽度 100% 的容器，然后给图片设置 width: 100%，以为这样就能自适应。但容器本身如果没有明确高度或比例约束，它的高度会由图片原始尺寸决定；当屏幕变窄，图片宽度缩小，高度也跟着缩小，容器比例就变了。如果想让容器固定比例，又直接给图片设 height: 100%，在某些布局下图片就会被强行拉伸或压缩。
另一个常见误区是使用 background-image 来做适配，虽然 background-size: cover 能解决比例问题，但图片就无法被屏幕阅读器识别，也不利于 SEO 和右键保存。因此我们更倾向于用真实 <img> 标签配合 CSS 容器控制来实现。
二、传统方案：padding-top 撑开比例
在 aspect-ratio 普及之前，前端通常用容器的 padding-top 百分比来制造固定比例。因为 padding 的百分比是相对于容器宽度计算的，所以 padding-top: 56.25% 就能得到 16:9 的盒子。图片使用绝对定位铺满即可。
这种写法的优点是兼容性极好，连 IE 都能支持；缺点也很明显，容器内部所有内容都要绝对定位，和普通文档流布局冲突，而且比例计算不直观，改比例要重新算百分比。下面是一个典型实现：
<div class="ratio-box"> <img src="https://ipipp.com/demo.jpg" alt="示例图片" /> </div>
.ratio-box {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
overflow: hidden;
}
.ratio-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
上面代码中，object-fit: cover 保证图片完整覆盖容器且不变形，多余部分被裁掉。如果你希望看到图片全貌而不裁切，可以把 cover 换成 contain，但那样可能会留白，需要配合背景色处理。
三、现代方案：aspect-ratio 直接声明
CSS 的 aspect-ratio 属性让容器自己声明宽高比，浏览器自动计算高度。它和 padding 技巧相比，语义清晰，容器内部可以继续用普通流式布局，不需要绝对定位。目前主流浏览器均已支持该属性。
使用 aspect-ratio 时，只需给容器一个比例值，例如 aspect-ratio: 16 / 9，然后再让图片 width: 100%、height: 100% 并配合 object-fit 即可。代码如下：
<div class="modern-ratio"> <img src="https://ipipp.com/demo.jpg" alt="示例图片" /> </div>
.modern-ratio {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.modern-ratio img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
这里把 img 设为 display: block 是为了消除行内元素底部的几像素空隙。aspect-ratio 也可以写成 1 / 1 做正方形头像，或 4 / 3 做相册。如果容器因为内容过多被撑开，aspect-ratio 只在没有显式高度时生效，这一点在嵌套 flex 时要注意。
四、结合响应式断点微调
在真实项目中，我们往往不希望所有屏幕都死守同一个比例。比如在手机上用 4:3 能显示更多图片面积，在桌面端用 16:9 更大气。这时可以用媒体查询覆盖 aspect-ratio 的值。
下面示例在小于 600px 时切换为 4:3，大于等于 600px 保持 16:9，图片始终 cover 适配：
.responsive-ratio {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.responsive-ratio img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 600px) {
.responsive-ratio {
aspect-ratio: 4 / 3;
}
}
这种写法维护成本低，改比例只改一行。相比旧版用 padding 并在媒体查询里重算百分比，显然更不容易出错。若需要考虑非常老的浏览器，可以用 @supports 做渐进增强，不支持 aspect-ratio 时回退到 padding 方案。
五、常见坑与排查清单
实际开发中，如果发现图片没有按比例显示，先检查容器是否真的拿到了宽度，比如在 flex 子项里没设 min-width: 0 可能导致宽度计算异常。其次确认 img 是否有默认 max-width: 100% 被其他样式覆盖。最后看 object-fit 是否写错成了 object-position 之类。
还有一个隐蔽问题是父级使用了 height: 100% 但祖父级没有具体高度，导致百分比高度失效。此时 aspect-ratio 反而更可靠，因为它只依赖宽度。总结下来，现代项目优先用 aspect-ratio 加 object-fit，旧项目维护可用 padding-top 法，两者核心都是把比例约束交给容器，图片只负责填充。
| 方案 | 兼容性 | 布局影响 | 维护成本 |
|---|---|---|---|
| padding-top 占位 | 极好（含 IE） | 需绝对定位 | 高（算百分比） |
| aspect-ratio | 现代浏览器 | 正常文档流 | 低（直观） |
通过上述对比和示例，你应该能在不同场景下选择合适的实现，让响应式图片在固定比例容器中始终保持宽高比并完全适配。