推荐用 aspect-ratio 实现等比缩放，直接设在容器上（如 .card-image），配合 width: 100%; height: 100%; object-fit: cover; 确保图片填满不拉伸；不支持时 fallback 为 padding-top 百分比方案。
卡片内图片或内容区域要随容器宽度等比缩放（比如 16:9、4:3），核心不是靠 width + height 手动算，而是用现代 CSS 的 aspect-ratio 或传统 padding-top 百分比技巧——前者简洁可靠，后者兼容老浏览器。
用 aspect-ratio 实现等比缩放（推荐）
这是目前最直接、语义清晰的方案，支持所有主流浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）。它让元素自身维持宽高比，不依赖父容器高度，也不触发重排。
-
aspect-ratio: 16 / 9直接写在需要缩放的容器上（如.card-image或包裹img的div），无需设height - 配合
img { width: 100%; height: 100%; object-fit: cover; }，确保图片填满且不拉伸 - 如果父容器是
grid或flex，aspect-ratio仍生效；但注意：不要同时设height，否则会覆盖比例计算 - 不支持时（如 IE 或旧 Safari），
aspect-ratio会被忽略，需 fallback —— 下面会说
用 padding-top 百分比实现兼容 fallback
当必须支持 Safari padding-top 的百分比值基于父容器宽度计算，可用来撑开高度。
- 给包裹容器设
position: relative，再加padding-top: 56.25%（对应 16:9 = 9/16 ≈ 0.5625） - 内部
img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 别忘了清除默认
margin和display: inline导致的基线间隙（img { display: block; }） - 这个方法在 flex/grid 容器里也稳定，但要注意：父容器必须有明确宽度（不能是
min-width: auto）
为什么不用 width + height + vw？
常见错误是写 width: 100%; height: 56.25vw; —— 这看似能等比，但实际问题很多：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
vw基于视口宽度，不是父容器宽度，嵌套在 flex/grid 里会错位 - 卡片列数变化时（如从 3 列变 2 列），
vw不随之调整，比例就崩了 - 响应式断点切换时，容易出现高度突变或内容溢出
- 滚动时可能触发频繁重排，尤其在低端设备上卡顿明显
图片本身怎么不撑高卡片？
即使用了 aspect-ratio 或 padding-top，如果 img 没处理好，仍可能破坏布局：
- 务必加
img { max-width: 100%; height: auto; display: block; }——max-width防超宽，display: block消除行内元素默认基线间隙 - 避免给
img设固定height，否则会覆盖object-fit行为 - 如果卡片用
flex-column布局，子元素（如文字）要靠flex: 1拉伸，否则图片高度变化时，文字区域不会自适应
真正关键的不是“让图片缩放”，而是让整个卡片区块的视觉节奏稳定——aspect-ratio 是首选，但得清楚它在哪失效、怎么兜底；padding-top 虽土，但在兼容性临界点上依然不可替代。别为了省一行 CSS 冒然删掉 fallback，尤其当你的用户还有大量 iOS 15.3 以下设备时。
