根本原因是img默认为inline元素，max-width:100%作用于行框而非父容器；需加display:block使其脱离行内流，或配合min-width:0（flex中）、box-sizing:border-box（含padding/border时）及height:auto才能真正防溢出。
为什么max-width: 100%加了还是溢出
根本不是max-width: 100%没生效，而是它作用的对象错了——<img>默认是inline元素，它的宽度计算基于行框（line box），不是父容器。此时max-width: 100%实际限制的是“一行能放多宽”，而不是“父盒子有多宽”。
- 必须给
<img>加display: block，让它脱离行内流，max-width: 100%才真正相对于父容器计算 - 如果不想改显示模式，可用
vertical-align: top消除基线间隙，但不如display: block彻底 - 父容器若用了
padding或border，且box-sizing: content-box（默认），那max-width: 100%只管内容区，不包含内边距和边框——容易漏算这几十像素
Flex布局里图片死活不缩，怎么办
Flex子项图片撑开容器，不是flex-shrink: 1失效，而是浏览器给替换元素（如<img>）设了隐式min-width: auto，它会阻止压缩到比原始尺寸还小。
- 必须显式给
<img>加min-width: 0，这是开关，缺了就白搭 - 搭配
max-width: 100%和height: auto一起用，三者缺一不可 - Safari尤其严格，光写
flex-shrink: 1不够，还得加min-height: 0防竖向撑高 - 别在
<img>上写width: 100%，它会强制拉伸；用max-width保比例更安全
object-fit填不满、裁错位置、糊成马赛克
object-fit不是自动适配神器，它只控制“怎么填”，不改变像素本身。很多模糊和错位问题，其实是前提条件没满足。
-
object-fit: cover或contain必须配合width: 100%和height: 100%才生效，单独写无效 - 父容器必须有明确宽高（比如
height: 300px或通过flex: 1继承），否则height: 100%等于auto，object-fit无从下手 - 关键内容被裁？加
object-position: center或具体值如20% 30%微调 - 图片糊？说明容器尺寸远超原图分辨率，CSS缩放无法提升像素——优先用
srcset提供高清源，而不是依赖object-fit放大
全屏/固定高容器里图片把底部顶跑
在flex: 1的全屏区域里，<img>即使写了object-fit: scale-down，仍会先按原始尺寸参与布局计算，导致父容器瞬间“膨胀”，破坏Flex高度分配。
- 唯一可靠解法：让图片脱离文档流——给父容器加
position: relative，给<img>加position: absolute -
top: 0; left: 0; width: 100%; height: 100%确保覆盖，object-fit: scale-down保证等比缩放不放大 - 注意：
scale-down只在原图大于容器时生效；原图小就保持原尺寸居中，适合混合尺寸图库 - 别指望
overflow: hidden兜底——它会裁掉所有绝对定位的弹层、tooltip、阴影，副作用比问题本身更麻烦
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
