图片居中失效主因是行内元素特性与布局上下文冲突：需设display:block触发margin:0 auto，或用flex/grid的justify-content:center；object-fit需配合显式宽高才生效。
图片排版乱了，八成不是图片本身的问题，而是布局上下文被悄悄接管了——比如父容器是 flex 却没设 align-items，或者 img 还卡在 inline 状态却硬套 margin: 0 auto。
为什么 margin: 0 auto 对图片没反应
因为 <img alt="HTML自适应图片排版乱了怎么办？重置布局解决技巧" > 默认是行内元素，margin: 0 auto 只对块级元素生效。浏览器压根不计算它的左右外边距。
- 必须加
display: block或display: inline-block才能触发自动居中逻辑 - 如果同时写了
width: 100%或max-width: 100%，图片就占满父容器，没“剩余空间”可分，auto失效 - 父容器若为
display: flex或display: grid，margin会被布局模型忽略，此时得靠justify-content: center - 父容器若有
float、position: absolute或缺失宽度，也会让margin: 0 auto彻底失灵
flex 容器里图片塌陷或错位
Flex 项默认会拉伸高度、保留最小宽度，而 <img alt="HTML自适应图片排版乱了怎么办？重置布局解决技巧" > 的 intrinsic 尺寸（原始宽高）可能被忽略，导致比例崩坏或留白异常。
- 给
<img alt="HTML自适应图片排版乱了怎么办？重置布局解决技巧" >加max-width: 100%+height: auto，强制等比缩放 - Flex 父容器若为卡片类布局，常因
min-width: auto阻止收缩，需显式加min-width: 0 - 若图片下方有 3–4px 空白，那是行内基线对齐残留，加
display: block即可清除 - 别在 flex 项上同时写
width和max-width，语义冲突，后者可能被浏览器静默忽略
object-fit 不生效的真正原因
object-fit 不是缩放开关，它只在 <img alt="HTML自适应图片排版乱了怎么办？重置布局解决技巧" > 被明确约束了宽高时才起作用。光写 object-fit: cover 没用。
立即学习“前端免费学习笔记（深入）”；
- 必须配合显式尺寸：比如
width: 100%; height: 200px，或父容器设aspect-ratio: 16 / 9 -
aspect-ratio在 Safari ≤15.2 不支持，降级要用padding-top: 56.25%+position: absolute填充 - 别和
max-width: 100%混用——它会让width动态变化，object-fit失去参照基准 - CMS 或微信导出的图常被清空 EXIF 尺寸信息，Safari/旧 Android 会直接塌陷；先查 Network 面板响应头里的
Content-Length和原始尺寸
响应式图文并排变堆叠后图片不左对齐
传统 float 布局在缩放或小屏下会“悬停”在右侧空白区，不是自然回落——因为它已脱离文档流，后续位置不受控制。
- 弃用
float，改用flex+ 媒体查询：宽屏flex-direction: row，小屏切回column - 小屏堆叠后想左对齐图片，直接给
<img alt="HTML自适应图片排版乱了怎么办？重置布局解决技巧" >加align-self: flex-start，别动margin或text-align - 文字与图片必须包裹在同一语义容器内（如
<article></article>或<div class="content-wrapper">），否则媒体查询无法统一接管 <li>避免给 <code><img alt="HTML自适应图片排版乱了怎么办？重置布局解决技巧" >单独设float、position或z-index，这些在断点切换时极易冲突且难调试
最常被忽略的一点：排版乱了，第一反应不该是调图片样式，而是打开开发者工具，点开父容器，看它的 display 类型、是否有隐式 min-width、是否被其他规则（比如全局 normalize.css 或 CMS 注入样式）悄悄覆盖了盒模型行为。
