图片尺寸异常主要由盒模型计算、边框/内边距干扰及宽高约束冲突导致；应统一box-sizing: border-box，用max-width: 100%和height: auto保持比例，配合display: block消除间隙，并用开发者工具排查样式覆盖。
图片放进容器后尺寸异常，多数情况是盒模型计算和边框/内边距干扰导致的。浏览器默认把 border 和 padding 算进元素总宽高里（即 box-sizing: border-box），但图片本身又受 max-width: 100%、width、height 及父容器约束影响，稍不注意就会撑出、裁剪或留白。
确认图片的 width/height 是否被强制固定
如果给图片设了具体像素值（如 width: 300px），而容器宽度更小，图片就会溢出或横向滚动。更稳妥的做法是：
- 用
max-width: 100%替代width: 100%，让图片在不超过容器的前提下保持原始比例 - 加上
height: auto，避免拉伸变形 - 若需等比缩放填充容器，可用
object-fit: cover（配合width: 100%; height: 100%）
检查父容器是否设置了 padding 或 border
比如容器写了 width: 300px; padding: 10px; border: 2px solid #ccc，实际内容区只剩 276px。此时图片即使设 width: 100%，也是按 276px 渲染，容易显得偏小或对不齐。
- 统一使用
box-sizing: border-box（推荐加在全局重置里：* { box-sizing: border-box; }） - 若仅针对该容器，可显式写
box-sizing: border-box，让 width 包含 padding 和 border - 必要时用
calc()手动减去边框和内边距，如width: calc(100% - 24px)
留意图片外层是否有 display 或 overflow 影响
图片默认是 inline 元素，底部会有空白间隙（由基线对齐引起）；容器若设了 overflow: hidden 却没处理好高度，也可能裁掉部分内容。
立即学习“前端免费学习笔记（深入）”；
- 给图片加
display: block消除行内间隙 - 父容器设
font-size: 0或line-height: 0也能解决间隙问题 - 若容器高度固定且图片要居中显示，建议用
flex布局 +align-items: center; justify-content: center
验证是否被其他 CSS 规则意外覆盖
尤其是来自框架、重置样式或更高优先级选择器的规则（如 img { max-width: none !important; }）可能破坏预期效果。
- 用浏览器开发者工具（F12）逐层检查图片元素的 computed 样式
- 重点看
width、max-width、box-sizing、padding、border是否符合预期 - 临时禁用可疑样式，观察变化，快速定位冲突来源
