核心是max-width: 100% + height: auto，因width: 100%在flex中受min-width: auto限制而失效，内联宽高会覆盖height: auto，IE中height: auto可能塌陷为0；必须配合min-width: 0、清除内联属性及srcset/sizes实现完整响应式。
图片在容器里不拉伸、不溢出、不塌陷，核心就一条：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 就是唯一干净解法。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
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百分比更简洁
响应式图片光靠 CSS 缩放远远不够
CSS 控制显示尺寸，srcset + sizes 才控制加载哪张图。漏掉后者，高清屏上图片发虚，小屏却加载 2MB 大图。
-
srcset列的是源图固有宽度，单位是w（如"small.jpg 480w"） -
sizes必须和 CSS 中该图片容器的**实际显示宽度逻辑一致**，否则浏览器选错源 - 示例：
- 始终保留
src作为不支持srcset的浏览器兜底
最容易被忽略的其实是两件事：一是 flex 容器里忘了加 min-width: 0，二是 sizes 写得和真实布局对不上——这两处一错，图片看着正常，实则带宽和渲染都在掉价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
