img元素上直接设min-width通常无效，因其为替换元素、固有尺寸优先；max-width仅在未被width覆盖且父容器有明确宽度时生效；正确做法是给容器设min/max-width，图片用max-width:100%+height:auto。
img 元素上直接写 min-width 和 max-width 通常无效
因为 img 默认是替换元素（replaced element），其固有尺寸优先级高，min-width 不会强制撑开内容，max-width 却能生效——但仅当它比图片原始宽度小且没有被其他 width 覆盖时。
常见错误现象：min-width: 300px 写在 img 上，小图依然显示得窄；max-width: 100% 没反应，是因为同时写了 width: 500px。
- 行内图片默认不响应
min-width，它只按自身像素宽高渲染，除非显式设为display: block或inline-block -
max-width生效的前提是：没被width固定值覆盖，且父容器有明确宽度约束 - 想让图片“最小不小于 300px”，实际应控制其**容器**的
min-width，再让图片用max-width: 100%填满
正确做法：用容器 + max-width: 100% + height: auto
这是最稳定、兼容性最好的响应式图片写法，适用于所有现代浏览器（包括 IE9+）。
示例：
立即学习“前端免费学习笔记（深入）”；
img {
max-width: 100%;
height: auto;
}
.image-wrapper {
min-width: 320px;
max-width: 1200px;
margin: 0 auto;
}
-
max-width: 100%确保图片不会溢出父容器，也不会放大超过原始尺寸 -
height: auto保持宽高比，避免拉伸变形 -
.image-wrapper的min-width和max-width控制整个区域弹性范围，比直接作用于img更可控 - 如果图片需点击区域最小化，应在 wrapper 上加
padding或用伪元素扩展热区，而非强求img自身min-width
遇到长单词/英文不换行导致 min-width 失效？
即使容器设了 min-width: 300px，一段无空格的英文（如 URL 或 base64 字符串）仍可能横向撑破布局，让 min-width 形同虚设。
- 这不是
min-width的问题，而是内容本身不可折行造成的溢出 - 解决方式：给图片父容器加
word-break: break-word或overflow-wrap: break-word - 若容器里混排文字和图片，建议把图片单独包一层，避免文字样式影响图片盒模型
- 对纯图容器，可加
overflow: hidden防止意外溢出，但慎用——会裁剪边缘
IE8 及更老浏览器中 min-width 不支持怎么办
IE8 支持 max-width，但对 min-width 支持极差（仅部分场景可用），不能依赖它做核心布局保障。
- 降级方案：用媒体查询模拟
min-width行为，例如@media screen and (min-width: 320px)中设置固定宽度 - 或改用 JavaScript 动态判断容器宽度并添加 class，再用 CSS 控制
- 更现实的做法是：放弃对 IE8 的
min-width弹性要求，用固定断点（如width: 320px）保底 - 注意：如果项目已不支持 IE8，就别花时间兼容，
min-width在现代浏览器中行为一致且可靠
max-width 是刹车，min-width 是地基，但图片自己不认地基，得靠容器来托住。 
