图片不拉伸、不溢出、不塌陷的核心解法是max-width: 100% + height: auto，缺一不可；width: 100% + height: auto因min-width: auto等限制易失效，object-fit适用于固定容器内等比填充或完整显示。
图片在容器里不拉伸、不溢出、不塌陷，核心就一条：max-width: 100% + height: auto，缺一不可。其他写法要么兼容性差，要么只解决一半问题。
为什么width: 100% + height: auto不够用
单独写 width: 100% 看似简单，但实际会踩三个坑：
- 如果父容器是
display: flex，img默认有min-width: auto，它会死守原始宽度，width: 100%直接失效 - 如果
img标签自带width="600"height="400"这类内联属性，CSS 的height: auto会被覆盖，高度卡死 - 在
position: absolute或display: table-cell等上下文中，IE9–11 会把height: auto算成 0，图片塌成一条线
所以更稳妥的起点是：max-width: 100%（不强制撑满，只设上限）+ height: auto（激活等比缩放）+ 显式清除内联宽高。
object-fit 什么时候必须用
当你已经给容器设了固定尺寸（比如卡片头像 width: 80px; height: 80px），又想让任意比例的图片填满且不失真，object-fit: cover 或 object-fit: contain 就是唯一干净解法。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后裁剪，填满——适合封面图、头像 -
object-fit: contain：等比缩放后留白，完整显示——适合产品图、图表 - 必须配合显式容器宽高，否则无效；老版 iOS Safari 需加
-webkit-object-fit前缀 - 不支持 IE，fallback 方案只能用
background-image+background-size，但会丢失alt和 SEO
Flex/Grid 容器里图片撑开布局怎么办
flex 或 grid 子项中的 img 很容易“扛着原始尺寸”把容器撑大，尤其在响应式断点切换时明显。这不是 bug，是浏览器对替换元素的默认行为。
- 最通用解法：
img { max-width: 100%; height: auto; min-width: 0; } -
min-width: 0是关键，它覆盖 flex 默认的min-width: auto，允许图片收缩 - 别依赖
flex-shrink: 1，对img效果不稳定；align-self: center可辅助垂直居中 - 如果容器本身也需等比占位（如 16:9），优先用
aspect-ratio: 16/9，比padding-top百分比更简洁
srcset 和 sizes 漏掉一个就白配
CSS 控制显示尺寸，srcset + sizes 才控制加载哪张图。漏掉后者，高清屏上图片发虚，小屏却加载 2MB 大图。
-
srcset列的是源图固有宽度，单位是w（如"small.jpg 480w"） -
sizes必须和 CSS 中该图片容器的实际显示宽度逻辑一致，否则浏览器选错源 - 如果只用
srcset不配sizes，浏览器默认按100vw算，大概率加载大图 - 示例：
<img src="fallback.jpg" srcset="photo-480.jpg 480w, photo-768.jpg 768w, photo-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="响应式图片">
真正麻烦的不是写法，而是 sizes 值必须严格对应你当前 CSS 中该图片所在容器的渲染宽度——这个映射一旦出错，浏览器就无法正确选源，而你很难从 DevTools 里一眼看出问题在哪。
