图片居中失效主因是行内元素特性与布局上下文冲突：需设display:block触发margin:0 auto，或用flex/grid的justify-content:center；object-fit需配合显式宽高才生效。

图片排版乱了，八成不是图片本身的问题，而是布局上下文被悄悄接管了——比如父容器是 flex 却没设 align-items，或者 img 还卡在 inline 状态却硬套 margin: 0 auto。

为什么 margin: 0 auto 对图片没反应

因为 默认是行内元素，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 项默认会拉伸高度、保留最小宽度，而 的 intrinsic 尺寸（原始宽高）可能被忽略，导致比例崩坏或留白异常。

• 给 加 max-width: 100% + height: auto，强制等比缩放
• Flex 父容器若为卡片类布局，常因 min-width: auto 阻止收缩，需显式加 min-width: 0
• 若图片下方有 3–4px 空白，那是行内基线对齐残留，加 display: block 即可清除
• 别在 flex 项上同时写 width 和 max-width，语义冲突，后者可能被浏览器静默忽略

object-fit 不生效的真正原因

object-fit 不是缩放开关，它只在 被明确约束了宽高时才起作用。光写 object-fit: cover 没用。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 必须配合显式尺寸：比如 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
• 小屏堆叠后想左对齐图片，直接给 加 align-self: flex-start，别动 margin 或 text-align
• 文字与图片必须包裹在同一语义容器内（如
  或
  ），否则媒体查询无法统一接管
• 避免给 单独设 float、position 或 z-index，这些在断点切换时极易冲突且难调试

最常被忽略的一点：排版乱了，第一反应不该是调图片样式，而是打开开发者工具，点开父容器，看它的 display 类型、是否有隐式 min-width、是否被其他规则（比如全局 normalize.css 或 CMS 注入样式）悄悄覆盖了盒模型行为。