最可靠方案是max-width: 100% + height: auto配合Flex居中；前者确保等比缩放不溢出不失真，后者实现水平垂直居中，无需JS或媒体查询。
直接结论：用 max-width: 100% + height: auto 控制图片缩放，再用 Flex 容器实现居中——两步搞定，无需 JavaScript，也不依赖媒体查询。
为什么 max-width: 100% + height: auto 是核心
这不是“可选技巧”，而是浏览器渲染图像比例的底层机制。设 max-width: 100% 让图片宽度不超父容器；height: auto 告诉浏览器“按原始宽高比算高度”，两者缺一不可。常见错误包括：
- 只写
width: 100%—— 强制拉伸，破坏比例 - 写了
width: 100%却漏掉height: auto—— 浏览器保留默认高度（常为 0 或固定值），导致压扁或空白 - 同时设
width和height像素值 —— 彻底锁定尺寸，完全失去响应性
Flex 容器居中比 text-align 更可靠
用 display: flex 实现二维居中，是目前最稳定、最少副作用的方式。关键点在于：
- 父容器必须有明确高度（如
height: 100vh或继承自有高父级） - 必须同时写
justify-content: center（水平）和align-items: center（垂直） - 图片自身仍需
max-width: 100%+height: auto，否则在窄屏下会溢出 - 避免给父容器加
float或position: absolute，否则 flex 行为可能失效
示例代码：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> @@##@@ </div>
父容器宽度控制决定缩放边界
图片是否“撑满全屏”或“只占中间一段”，取决于它外层容器的宽度策略：
- 想让图片最大不超过视口 80%，就给父容器设
max-width: 80vw，再配margin: auto - 想在大屏下限制宽度（比如最多 1200px），就用
max-width: 1200px+width: 100%，而不是固定width: 1200px - 如果父容器没设宽度（如
div默认width: auto），图片的max-width: 100%就等同于视口宽度，容易在大屏下过大 - 记得加
box-sizing: border-box到父容器，避免 padding/border 意外撑宽
移动端 Safari 和旧版浏览器的兼容细节
大部分现代浏览器对 max-width + height: auto 支持良好，但仍有几个易忽略点：
- Safari on iOS 有时对未设
width的img默认不缩放，可加width: 100%保险（注意：不是替代max-width，而是补充） - 若图片作为内容主体（非装饰），务必保留
alt属性，否则无障碍阅读器无法识别 - 需要高清屏适配时，别只靠 CSS 缩放，应配合
srcset提供多分辨率源：
- 避免用
object-fit: contain替代原生缩放——它对
真正卡住人的往往不是“怎么写”，而是父容器有没有被其他样式（比如 position: absolute、float、固定 width）悄悄破坏了流式上下文。检查时优先看容器，再看图片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
