最稳方案是img加max-width:100%和height:auto，再用flex容器居中；前者防拉伸溢出，后者确保水平垂直居中且不依赖父宽。
直接给 img 加 max-width: 100% 和 height: auto，再用 Flex 容器居中——这是最稳、最少坑的组合，不需要 JS，也不依赖父容器是否设了 width。
为什么 max-width: 100% + height: auto 是底线
这两条不是“可选优化”，而是防止拉伸和溢出的硬性前提：
-
max-width: 100%确保图片宽度不会超过父容器（哪怕父容器是div默认的 100% 视口宽） -
height: auto强制浏览器按原始宽高比重算高度；漏掉它，浏览器可能沿用默认高度或继承其他样式，导致压扁或拉长 - 绝对不要同时写
width: 100%和height: 100%——这等于告诉浏览器“不管比例，给我撑满”，99% 的失真都源于此
Flex 居中比 text-align 或 margin: 0 auto 更可靠
只靠 text-align: center 只能水平居中，且对 display: block 的 img 失效；margin: 0 auto 要求 img 是块级且有明确宽度，而响应式下宽度是流动的。
正确做法是把居中逻辑交给容器：
- 父容器加
display: flex; justify-content: center; align-items: center; - 容器高度必须明确，常用
height: 100vh（全屏）或min-height: 500px（内容区） -
img保持max-width: 100%; height: auto;，不加width或height固定值
示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> @@##@@ </div>
父容器没设宽度时，图片会撑太宽或模糊
如果外层 div 没限制宽度（比如只是 <div><img src="photo.jpg" style="max-width:90%"></div>），max-width: 100% 就等于视口全宽。小图会被强行放大，细节糊掉。
解决方法是给容器加尺寸约束：
- 用
max-width: 800px防止大屏下过宽 - 用
width: 90vw让容器随视口缩放，再让图片填满它 - 组合写法：
<div style="max-width: 800px; margin: 0 auto;"><img></div>
需要裁剪+居中（比如头像、Banner）就别用 img 标签
如果目标是“等比缩放后自动裁掉多余部分，并始终以中心为焦点”，object-fit: cover 理论上可行，但兼容性和渲染稳定性不如背景图方案。
更稳妥的做法是换用 div + background-image：
-
background-size: cover强制等比填满 -
background-position: center锚定焦点 -
padding-bottom: 100%（或其他比例值）控制容器宽高比，避免塌陷
例如固定 1:1 容器：
<div style="width: 100%; padding-bottom: 100%; background: url(photo.jpg) center/cover;"></div>
真正容易被忽略的是：居中效果是否在所有视口宽度下都成立——尤其当父容器用了 position: absolute 或 fixed 时，它的尺寸上下文可能丢失，此时 % 单位会失效，得改用 vw/vh 或显式设 width。缩放不是只调图片，而是整条布局链都要响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
