图片响应式缩放应使用 max-width: 100% 和 height: auto 组合，以保持原始宽高比；单独 width: 100% 会导致变形；需确保父容器有宽度约束并排除冲突样式，必要时配合 srcset 提升高清屏显示与加载性能。
让图片随页面宽度自动缩放，核心是用 max-width: 100% 配合 height: auto，而不是单纯写 width: 100% —— 后者容易拉伸变形，前者才真正保持原图比例、安全响应式。
最简可靠方案：max-width + height:auto
这是现代网页中最常用、兼容性好、无需 JS 的做法：
- 给
<img>设置max-width: 100%; height: auto; - 确保父容器（如
<div>）本身有宽度约束，比如width: 100%、max-width: 1200px或处于 flex/grid 流体布局中 - 移除图片上可能存在的
height行内样式或 CSS 规则，否则会覆盖height: auto
为什么 width: 100% 单独用会出问题
只设 width: 100% 时，浏览器会强制把高度撑满，完全忽略原始宽高比。结果就是图片被“压扁”或“拉长”，尤其在卡片、文章正文等场景里很常见。
而 max-width: 100% 表示“最多占满父容器宽度”，height: auto 则告诉浏览器：“按原图比例算高度”。两者配合，缩放始终等比、不失真。
立即学习“前端免费学习笔记（深入）”；
排查不生效的常见原因
如果加了 max-width: 100% 还是没反应，大概率是下面这几个地方卡住了：
- 父容器没有宽度（比如
<div>没设宽，又不是 flex item），导致 100% 无参照 - CSS 中存在更高优先级的规则，比如框架（如 Bootstrap）全局设了
img { max-width: 100% }，但你又写了width: 100%覆盖了它 - 浏览器计算样式里出现
max-width: none，常由某些重置样式或组件库引入，可用开发者工具的 Computed 面板确认
需要高清屏或节省流量？补充 srcset
纯缩放用上面两行 CSS 就够了。但如果要考虑性能和显示质量：
- 小屏幕加载大图 → 浪费带宽
- Retina 屏用 1x 图 → 显示模糊
这时加上 srcset 和 sizes 属性，浏览器就能按设备像素比和视口宽度自动选图，例如：
srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">
