只设max-width: 100%不够，因小图保持原尺寸导致布局松散或留白；必须配合height: auto保比例，且min-width在img上通常无效，应改用容器约束+width: 100%方案。
max-width 和 min-width 是控制图片宽度边界的最直接方式，但必须配合 height: auto 才能保持比例不被破坏。
为什么只设 max-width: 100% 不够？
单独用 max-width: 100% 能防止图片撑破容器，但小图会原样显示、不拉伸，有时导致布局松散或留白过大。加 min-width 可以兜底，但要注意它对 <img> 元素本身效果有限——因为图片的固有尺寸（intrinsic size）会优先于 min-width 生效，除非你显式覆盖宽度行为。
-
min-width在<img>上通常无效，除非同时设width: 100%或width: auto（后者不推荐） - 更可靠的做法是把图片包进一个容器，对容器设
min-width，再让图片继承该宽度约束 - 如果目标是“小图也占满容器”，应改用
width: 100%+height: auto，此时min-width才真正起作用
img 元素上 min-width 的生效条件
浏览器对替换元素（如 <img>）的 min-width 处理很保守：只有当 width 被设为 auto 或百分比且父容器有明确宽度时，min-width 才可能参与计算。实际中建议绕过这个限制：
- 给
<img>设width: 100%+height: auto，再对其父<div> 设 <code>min-width: 320px - 避免在
<img>上直接写min-width，尤其不要和max-width混用在同一规则里——容易触发不可预测的尺寸回退 - 若需强制最小渲染宽度（比如缩略图），可用
width: min(100%, 200px)（CSS 函数，兼容性需查 Can I Use） - 给
<img>加display: block是基础操作，否则底部会有空白间隙，还影响尺寸控制 - 对
<table> 容器，改用 <code>table-layout: fixed+ 显式width，再通过子单元格控制图片尺寸 - 遇到图片在 flex 容器中收缩异常，检查是否漏了
flex-shrink: 0——否则min-width可能被 flex 算法忽略
常见错误：对 table 或 inline 图片误用 min-width
表格单元格里的图片、或者未设 display: block 的 <img>，min-width 基本不生效。原因在于 inline 元素的宽度计算逻辑不同，且 table 的尺寸算法特殊，会忽略大多数 min-width 声明。
真正起作用的组合往往是「容器设 min-width / max-width」+「图片设 width: 100% + height: auto」，而不是把所有限制堆在 <img> 标签上。这点容易被忽略，但决定了响应是否稳定。
