最常用且有效的起点是img { max-width: 100%; height: auto; }，但其失效主因是父容器无宽度参照、内联宽高属性覆盖或Flex/Grid中min-width: auto阻止收缩，需配合min-width: 0、清除内联属性及正确使用object-fit或srcset/sizes。
直接写 img { max-width: 100%; height: auto; } 是最常用也最有效的起点，但它不是万能的——失效时往往不是代码错了，而是父容器、布局上下文或内联属性在暗中干扰。
为什么 max-width: 100% + height: auto 有时不生效
这组规则依赖三个隐性前提：父容器有可计算宽度、图片没被内联宽高锁定、布局模式允许收缩。常见卡点包括：
- 父容器是空 或仅设
display: flex却没约束尺寸，100%就失去参照height: auto- 在
flex容器中，min-width: auto，阻止它随容器变窄而缩放- 全局 CSS（如 Bootstrap）写了
img { max-width: none; }，直接顶掉你的规则object-fit在固定尺寸容器中怎么用才有效object-fit不是“让图片自适应”，而是“让图片按指定框裁剪或缩放填充”。它只在容器有明确宽高时起作用：
Wechat Article Html下载将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须同时设置容器的
width和height（或用aspect-ratio: 16/9） -
object-fit: cover：等比缩放+裁剪，适合封面图；可用object-position: top控制裁剪起点 -
object-fit: contain：等比缩放+完整显示，留白是设计结果，不是 bug - 老版 iOS Safari 需加
-webkit-object-fit；IE 完全不支持，fallback 只能用background-image，但会丢alt和 SEO
srcset和sizes解决的是加载问题，不是显示问题max-width: 100%控制图片怎么“画出来”，srcset+sizes决定浏览器“加载哪一张”。两者分工明确，不能互相替代：-
srcset提供多个物理尺寸版本：image-480w.jpg 480w、image-1200w.jpg 1200w -
sizes告诉浏览器“这张图在不同视口下会占多宽”：(max-width: 600px) 100vw, 33vw - 浏览器根据
sizes算出目标显示宽度，再从srcset中选最接近且不小于它的图片加载 - 别指望靠一张大图 +
max-width: 100%应对所有设备——小屏用户会白白下载几 MB 图片
真正难的不是写哪一行 CSS，而是判断当前场景到底要解决什么：是图片溢出？是拉伸变形？是加载太慢？还是高清屏模糊？每个问题背后对应的技术路径完全不同，混用反而会让问题更难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
