width: 100%加height: auto是起点，但需父容器有明确宽度、无样式冲突；固定容器中应改用object-fit: cover/contain并配显式宽高；srcset+sizes解决加载优化，与object-fit分工明确。
width: 100% 加 height: auto 是最直接有效的起点，但单独写这行 CSS 很可能没反应——问题几乎总出在父容器或样式冲突上。
为什么 img { width: 100% } 没生效？
浏览器计算 100% 需要明确的参照基准，而 <img> 默认是内联替换元素，它的宽度不会自动撑开父级。常见卡点：
- 父容器（比如
<div>）没设宽度，或者宽度是 <code>auto（例如未加width: 100%或max-width: 1200px） - 全局 CSS（如 Bootstrap）或自定义规则写了
img { max-width: none }，直接覆盖了你的width: 100% -
<img>标签里有style="max-width:90%"这类行内属性，强制固定高度，导致height: auto失效 - 父容器用了
display: flex但没设flex-shrink: 0或max-width: 100%，图片原始尺寸把容器撑开了 - 用
object-fit: cover：等比缩放+裁剪，适合封面、头像——但关键内容可能被切掉，可加object-position: top调整裁剪起点 - 用
object-fit: contain：等比缩放+居中留白，适合产品图、图表——注意上下/左右空白是设计结果，不是 bug - IE 不支持
object-fit，fallback 方案得用background-image+background-size，但会丢alt和 SEO -
srcset列出不同宽度的图源（单位是w），例如"photo-400.jpg 400w, photo-800.jpg 800w" -
sizes告诉浏览器“这张图在页面中实际占多宽”，例如"(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw"——值必须和 CSS 中该容器的显示宽度逻辑一致，否则选错图 - 不写
sizes时浏览器默认按100vw估算，小屏也容易载入大图 - WebP 格式可进一步压缩体积，现代浏览器基本支持
固定容器里让图片填满又不畸变
当父容器宽高都固定（比如卡片头图 height: 200px），仅靠 width: 100%; height: auto 会留白或溢出。object-fit 才是解法，但它必须配合显式容器尺寸才起作用：
响应式场景下避免加载大图浪费带宽
CSS 缩放只是“显示变小”，浏览器仍会下载原图。真要兼顾清晰度和性能，srcset + sizes 不可少：
真正容易被忽略的是：object-fit 和 srcset 解决的是不同层面的问题——前者管“怎么塞进框里”，后者管“载哪张图”。混用时若容器尺寸靠 JS 动态计算，sizes 的值就容易失准；而所有这些，都依赖父容器有明确的宽高约束，而不是靠 position: absolute 或固定像素偏移硬推位置。
