根本原因是控制尺寸时破坏原始宽高比，如width:100%;height:200px、background-size:100% 100%或未配height:auto；居中仅放大变形图，而非导致变形。
为什么居中后图片会变形
根本原因不是“居中”本身，而是你在控制尺寸时破坏了原始宽高比。常见操作如直接写 width: 100%; height: 200px、用 background-size: 100% 100%、或没配 height: auto，都会强制拉伸/压扁图片。
居中只是把一个已变形的图“稳稳地放在中间”，问题出在缩放逻辑上，不是对齐方式。
-
max-width: 100%必须搭配height: auto，否则浏览器无法按比例推算高度 - 如果父容器有固定高度（比如
height: 300px），max-width就失效了——此时必须换方案 -
object-fit是专为这类场景设计的，但必须同时设width和height（哪怕一个是auto）才生效
用 object-fit 控制缩放行为
这是现代浏览器下最干净的解法，不改布局、不依赖父容器高度、还能指定焦点区域。
关键点：它只作用于 <img> 元素自身，且必须有明确的“盒子”——也就是你得给它设至少一个尺寸约束。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 填满容器并裁剪：
object-fit: cover; width: 100%; height: 300px;（配合object-position: center top可保人脸不被切掉） - 完整显示并留白：
object-fit: contain; width: 100%; max-height: 300px; - 绝对禁止：
object-fit: fill—— 这就是变形本形，除非你真要压成海报 - IE11 不支持？那就退到
max-width: 100%; height: auto;+ 父容器 flex 居中，但得接受容器高度不固定
父容器高度固定时怎么稳住图片
比如卡片组件规定 height: 200px，又不能让图溢出或变形——这时仅靠 max-width 无解，必须从容器维度入手。
- 用
aspect-ratio: 16 / 9（现代浏览器）：让容器自己维持比例，再套max-width: 100%; height: auto; - 老浏览器 fallback：用
padding-top技巧撑开容器高度，图片绝对定位居中（需父容器position: relative） - 背景图方案更可控：
background-image: url(...); background-size: cover; background-position: center;，但放弃 SEO 和右键保存 - 别在同一个容器里混用
flex和position: absolute——前者管布局流，后者脱离流，容易打架
微信公众号等富文本环境特别注意
微信 HTML 渲染器对 CSS 支持有限，object-fit 在部分 Android 客户端可能不生效，flex 的 align-items 也常被忽略。
- 优先用最简组合：
display: block; margin: 0 auto; max-width: 100%; height: auto; - 避免
transform居中（translate(-50%, -50%)在微信里易错位） - 上传前压缩并限制原图宽度（如 ≤1200px），否则即使居中，小屏也会横向溢出
- 别依赖
text-align: center对块级img生效——微信里它只影响行内元素，而很多编辑器默认把图转成block
max-width + height: auto 就够）、固定高卡片（必须上 object-fit 或背景图）、还是发到微信这种受限环境（得主动降级、提前压图）。选错前提，所有样式都会打滑。 
