图片尺寸异常主要由盒模型计算、边框/内边距干扰及宽高约束冲突导致；应统一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 是否符合预期
• 临时禁用可疑样式，观察变化，快速定位冲突来源