img的min-width与max-width需配合display、width和height:auto才生效：min-width防过小但需块级化及父容器约束，max-width:100%防溢出，二者单独使用常无效。
img 的 min-width 和 max-width 都要设，但意义完全不同
直接写 min-width: 100px 对 <img> 多数时候没效果——因为图片默认是 inline 元素，min-width 不触发；而且它本身有固有尺寸，浏览器优先按原始宽高渲染。真正起作用的是：先用 display: block 或 display: inline-block 激活尺寸约束，再配合 min-width + max-width + height: auto 才可控。
常见误操作是只加 max-width: 100%，结果小图被强行撑大到容器满宽，失去细节；或加了 min-width: 200px 却没设 width 或 max-width，导致在窄屏下图片溢出。
-
max-width: 100%是响应式底线，防止大图撑破容器 -
min-width: 150px（举例）需搭配width: 100%或flex: 1才生效，否则它只是“摆设” - 若父容器是
flex，子img还得额外加min-width: 0，否则 flex 会阻止收缩 - 写了
min-width却没写height: auto，比例一崩，min-width就变成拉伸起点
想让图片“不小于某尺寸又不撑爆容器”，得靠父容器配合
纯靠 img 自身样式很难同时锁死上下限，更可靠的做法是把约束逻辑上移——用父容器控制可用空间，再让图片在里面自适应。
比如卡片内固定区域展示头像：
立即学习“前端免费学习笔记（深入）”；
div.card {
width: 300px;
min-width: 240px; /* 卡片最小宽度 */
}
.card img {
width: 100%;
height: auto;
max-width: 120px; /* 图片自身最大宽度 */
min-width: 80px; /* 图片自身最小宽度 */
display: block;
}注意：这里 min-width: 80px 能生效，是因为父容器给了明确宽度上下文，且 img 是 block；如果父容器是 flex 且没设 min-width，这个 min-width 依然可能被忽略。
- 移动端小屏下，父容器缩到
240px，图片按width: 100%缩到 240px，但受max-width: 120px限制，最终显示为 120px 宽 - 桌面端大屏下，父容器宽 300px，图片可撑到 120px（不继续放大），保持清晰度
-
min-width: 80px在父容器缩得太小时起兜底作用，避免图片被压成一条线
srcset + sizes 才管“加载哪张图”，CSS 只管“怎么画出来”
很多人以为设了 min-width 和 max-width 就能控制资源加载，其实完全不是一回事。max-width: 100% 再配合 height: auto 只影响渲染尺寸，不阻止浏览器下载一张 2000px 宽的图然后缩成 300px 显示——流量照耗，首屏照慢。
真要控制加载行为，必须用 srcset 和 sizes：
<img
src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 768w,
photo-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="示例">-
sizes告诉浏览器：“这张图在不同断点下，你打算让它占多大物理宽度” - 浏览器根据
sizes计算目标尺寸，再从srcset中选最接近的w候选项加载 - 如果
sizes写错（比如断点值和实际布局脱节），浏览器直接退化为只加载src -
min-width/max-widthCSS 样式对srcset选择过程零影响
容易被忽略的兼容性坑
看似简单的尺寸控制，在真实项目里常因细节翻车：
- Safari 12.1 之前版本对
srcset的w描述符支持不全，旧 iOS 可能只按 DPR 匹配，导致高分屏仍加载低分辨率图 - EdgeHTML（旧版 Edge）解析
sizes时，媒体查询里带空格（如(max-width: 768px)）会导致整个属性失效 -
object-fit在父容器没设明确宽高时完全不生效，不能指望它“救”min-width失效的问题 - CSS
min-width对<img width="600">这类内联属性无效——HTMLwidth生成的内联样式优先级高于外部 CSS
真正麻烦的从来不是写几行 CSS，而是布局变了但 sizes 没同步更新，或者 srcset 提供的宽度候选值和实际渲染宽度严重错位——这时候图片要么糊，要么白耗流量，还查不出原因。
