最可靠方案是max-width: 100%配合height: auto，但必须确保父容器有明确宽度、Flex子项加min-width: 0、display: block消除底部空白，且避免内联宽高或冲突样式干扰。
卡片里的图片不自适应，不是 CSS 写得不够多，而是没管住“谁在决定宽度”和“谁被允许收缩”。max-width: 100% 单独存在时，90% 的情况都失效。
为什么 img { max-width: 100%; height: auto; } 经常不生效
它只在父容器有明确可参照宽度时才起作用。常见失效链路：
- 父
<div class="card"> 没设 <code>width或max-width，比如只写了display: grid就完事 - 卡片是 Flex 子项，默认
min-width: auto，会锁死最小宽度，max-width: 100%被忽略——必须给卡片本身加min-width: 0 - 用了
object-fit: cover却没给图片容器设固定宽高（如width: 100%; aspect-ratio: 4/3;），此时object-fit完全不触发 - 外部框架（如 Bootstrap）全局重置了
img样式，你又用行内style="width: 400px"覆盖，冲突优先级赢了 - 确保网格容器有明确宽度约束：
max-width: 1200px; width: 100%，否则1fr计算无基准 - 给每张卡片（grid item）加
min-width: 0，这是关键一步，否则图片的max-width: 100%不会被尊重 - 图片样式统一写为：
width: 100%; height: auto; display: block;（display: block消除底部间隙） - 若需固定宽高比（如封面图），优先用
aspect-ratio: 4/3+object-fit: cover；不支持时 fallback 用padding-top: 75%+position: relative+position: absolute布局 -
<img alt="HTML卡片图片怎么自适应？卡片式布局设置指南" >必须带width和height属性（哪怕只是占位值，如width="300" style="max-width:90%"），否则浏览器无法预留空间，加载时触发 CLS - 禁用
background-image填充卡片图——它无法设置width/height，不支持懒加载，打印和无障碍也全崩 - 文字截断别依赖
line-clamp：用更稳的overflow: hidden; text-overflow: ellipsis; white-space: nowrap;控制单行标题；多行描述用display: -webkit-box; -webkit-line-clamp: 2;（iOS/Android 支持良好） - 异步内容（如懒加载图片）进来前，卡片要设
min-height（例如min-height: 200px），否则高度塌陷造成后续卡片上跳
display: grid 卡片网格中图片撑开列宽怎么办
Grid 容器里图片“不听话”，本质是列轨道被 minmax(280px, 1fr) 锁死了下限，或子项未释放收缩权限。解法不是调图片，而是调容器行为：
响应式截断与加载稳定性怎么兼顾
图片拉伸、文字溢出、布局抖动（CLS）往往是一起发生的，根源都在“尺寸不可预期”。要同时稳住三者：
立即学习“前端免费学习笔记（深入）”；
真正卡住人的，从来不是“怎么让图片变小”，而是“怎么让整条渲染链路都提前知道尺寸边界”。width/height 属性、min-width: 0、aspect-ratio 这三样，漏掉任何一环，自适应就变成碰运气。
