最简洁可靠的图片响应式缩放方案是设置 max-width: 100% 和 height: auto；前者限制宽度不超父容器，后者让浏览器按原始比例自动计算高度，确保等比缩放不变形。
用 max-width: 100% 配合 height: auto 就能实现图片自动缩放且保持原始宽高比，这是最简洁可靠的方案。
基础写法：响应式等比缩放
只需给 <img> 标签设置以下 CSS：
- max-width: 100%：让图片宽度不超过父容器宽度
- height: auto：浏览器自动按原始比例计算高度，避免变形
示例代码：
<img src="photo.jpg" style="max-width: 100%; height: auto;">适配不同容器场景
如果图片放在固定宽高的容器里（比如卡片、弹窗），建议同时限制最大尺寸：
立即学习“前端免费学习笔记（深入）”；
- 加
max-height: 100%防止纵向溢出 - 确保父容器有明确宽度（如
width: 100%或具体像素值） - 可选加
display: block消除底部默认空白
完整样式示例：
<img src="logo.png" style="max-width: 100%; max-height: 100%; height: auto; display: block;">需要居中显示时
若图片比容器小，想水平/垂直居中，可这样处理：
- 把图片放入一个
<div>容器，并设text-align: center实现水平居中 - 对容器设
display: flex; align-items: center; justify-content: center;实现完全居中 - 注意：此时仍需保留
max-width和height: auto
避免常见坑
有些写法看似可行但容易出问题：
- 不用
width: 100%; height: auto—— 宽度强制拉满会破坏比例（除非父容器宽高固定） - 避免只写
width: 100%不写height: auto—— 浏览器可能保持默认高度导致拉伸 - 不推荐用
object-fit: contain单独处理 —— 它适合<video>或背景图，对普通<img>不如原生缩放稳定
