图像溢出容器不可见，本质是overflow默认裁剪且容器尺寸/定位未适配图片布局需求；常见因父容器固定宽高、未设max-width:100%或object-fit，及overflow:hidden被忽略所致。
图像超出容器看不见，本质是 overflow 默认裁剪 + 容器尺寸/定位未配合图像实际布局需求。不是图片“丢了”，而是被父容器默默切掉了。
为什么 ![HTML5图像位置怎么确定图像超出容器看不见_溢出看不见解决方法【解答】]()
常见原因是：父容器设置了固定宽高（如 width: 200px; height: 150px;），但图片原始尺寸更大，且未设置 max-width: 100% 或 object-fit；同时父容器的 overflow 默认为 visible 时可能撑开布局，设为 hidden 就直接裁剪——多数人用的是后者却没意识到。
-
overflow: hidden是最常被忽略的“隐形杀手”，尤其在卡片、头像、缩略图等固定尺寸容器中默认启用 - 图片未设
display: block时，底部可能有空白间隙，导致视觉上“偏移”或“撑高”，加剧溢出错觉 - 使用
position: absolute脱离文档流后，若父容器没设position: relative，图片会相对 viewport 定位，完全脱离容器约束
object-fit 和 max-width 怎么选
object-fit 控制图片内容如何适应容器框（类似背景图的 background-size），max-width 则是响应式基础——二者解决不同问题，常需共用。
- 要保持宽高比、不拉伸变形：用
object-fit: cover（裁剪）或object-fit: contain（留白）；必须同时设width: 100%; height: 100%才生效 - 只希望图片宽度自适应、高度随比例缩放：用
max-width: 100%; height: auto，这是最轻量、兼容性最好的方案（IE9+） -
object-fit在 iOS Safari 旧版本（img 包一层div+background-image
定位类溢出（position: absolute）怎么收口
当给 position: absolute，它就不再受父容器 padding、border 约束，而是以最近的 position: relative/absolute/fixed 祖先为参考——如果没找到，就相对于 viewport。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有
position: relative，否则top/left值会“飞出去” - 用
inset: 0替代top: 0; left: 0; right: 0; bottom: 0更简洁，但注意兼容性（不支持 IE 和旧版 Safari） - 若想居中覆盖，推荐：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，比margin负值更可靠
真正难的不是让图片“显示出来”，而是判断它该以什么方式适配——是裁剪、缩放、留白，还是脱离文档流精确定位。每种选择背后都绑着语义、可访问性和响应式行为，漏掉任意一环，下次改样式时还会掉坑里。
