用百分比 padding-bottom 可保持图片卡片宽高比，因其值按父容器宽度计算，配合绝对定位图片实现响应式缩放，兼容性优于 aspect-ratio。
图片卡片用百分比 margin 为啥能保持宽高比
因为 margin-top 或 margin-bottom 设为百分比时，它的计算基准是**包含块的宽度**（不是高度），这个特性可以被借用来“撑开”容器高度。只要让卡片内部内容脱离文档流（比如用 position: absolute），再用 padding-bottom 或 margin-bottom 占出固定比例的高度空间，图片就能自然按需缩放。
常见错误现象：直接给 img 设 width: 100%; height: auto;，但父容器高度塌陷，导致卡片高度随内容浮动、比例失控。
- 必须给卡片容器设
position: relative;，否则子元素absolute会往上层找定位上下文 -
margin-bottom和padding-bottom效果等价，但padding更常用——它不参与 margin 合并，行为更可预测 - 16:9 比例对应
padding-bottom: 56.25%;（9 ÷ 16 = 0.5625），4:3 是75%，1:1 是100%
最简可用的 HTML + css 结构
不用 js、不依赖 aspect-ratio（兼容旧浏览器），三行核心样式搞定：
```css .card { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ } .card img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; Object-fit: cover; } ```使用场景：CMS 输出的图集、移动端商品卡片、博客封面图——所有需要统一视觉节奏但原始图片尺寸不一的情况。
立即学习“前端免费学习笔记（深入）”；
- 如果图片要居中裁切，必须用
object-fit: cover;，只写height: 100%会导致拉伸变形 - IE 不支持
object-fit，若需兼容，得 fallback 到 background-image 方案 - 容器本身要有明确宽度（比如
max-width: 300px;），否则在超宽屏上图片会无限拉宽
用 background-image 替代 ![CSS如何实现响应式的图片卡片_利用百分比margin保持比例]()
的适用时机
当需要精确控制焦点区域（比如人物脸部不被裁掉）、或服务端返回的是 CDN 参数化 URL（如 ?w=300&h=169&fit=crop）时，<img alt="CSS如何实现响应式的图片卡片_利用百分比margin保持比例" > 标签反而难控制，此时用背景图更稳。
错误现象：给 div 设 background-image 后没设宽高，结果啥也不显示；或者写了 height: 0; padding-bottom: 56.25%; 却忘了 background-size: cover;。
- 必须同时写
background-size: cover;和background-position: center; - 响应式图片 srcset 无法用于 background-image，所以 seo 和无障碍支持弱于原生
<img alt="CSS如何实现响应式的图片卡片_利用百分比margin保持比例" > - 如果卡片带 hover 动效（比如阴影、scale），用背景图性能略好——避免重绘 img 元素本身
aspect-ratio 出来后还要不要手算 padding-bottom
要，至少现在还要。因为 aspect-ratio 在 safari 15.4+ 才稳定支持，ios 15.4 之前全挂；而且它对 flex/grid 子项的行为有隐含约束（比如在 flex: 1 容器里可能失效）。
性能影响几乎为零，但兼容性坑很实在：某次上线后发现 ipad mini 4 用户卡片全变一条细线，查出来就是 aspect-ratio 被忽略，容器高度塌成 0。
- 新项目可双写：
aspect-ratio: 16/9;+ 回退padding-bottom: 56.25%; - 不要只信 CanIUse 的“支持”，真机测 iOS 15.3.1 —— 它标绿，但实际不生效
- 如果卡片内还要放标题、按钮等绝对定位元素，
padding-bottom方案的层级和定位逻辑更直观，不易错
比例这件事，看着只是数字换算，实际卡在浏览器解析顺序、定位上下文继承、以及你没法控制用户手里的那台旧 iPad 上。算清楚百分比，比等一个 CSS 新属性落地更省心。