最可靠方案是max-width: 100%; height: auto;，但需父容器有可计算宽度且无干扰；width: 100%会强制撑满导致变形，object-fit仅适用于固定尺寸容器内控制缩放方式。
直接结论：只设 max-width: 100% 和 height: auto 不够，必须配合容器约束或 object-fit 才能真正防变形。
为什么 max-width: 100% + height: auto 有时还是变形
它只在「图片宽度超容器」时生效；如果父容器本身高度固定（比如卡片 height: 150px），而你又没给图片设宽高约束，浏览器会按原始比例撑高容器——结果是布局跳动，或者被 flex/grid 拉伸失真。更常见的是：你删了 HTML 的 width/height 属性，但忘了清掉内联样式里的 width: 100%; height: 200px，这类硬编码会直接覆盖 height: auto。
- 检查 DevTools 的 Computed 标签页，确认最终生效的
height是auto而非具体像素值 - 避免同时写
max-width: 100%和width: 100%，后者会强制拉伸小图 - 用
display: block消除<img>默认的 inline 基线对齐空白，否则底部可能多出几像素空隙
固定尺寸容器里必须用 object-fit
当图片要塞进头像框、卡片封面、轮播图等「明确宽高」的盒子时，max-width 失效，object-fit 是唯一语义清晰的解法。
-
object-fit: cover：等比缩放填满，裁剪多余部分——必须配object-position: center（默认是居中，但 Safari 旧版可能不一致） -
object-fit: contain：等比缩放完整显示，留白由父容器背景色填充 -
object-fit: fill是变形开关，除非你真想压扁它，否则别碰 - 注意：
object-fit只在width和height都有值（或至少一个固定）时才起作用
需要保持宽高比但不想依赖图片自身尺寸？用 aspect-ratio
比如轮播图容器、视频封面、图标组——这些地方图片常为空白占位，靠自身撑不开高度。现代方案直接用 CSS 控制容器比例：
-
aspect-ratio: 16 / 9：一行代码定义比例，浏览器自动算高度 - 搭配
width: 100%或max-width: 400px，尺寸可缩放，比例不丢 - 旧浏览器 fallback：用
padding-top: 56.25%+ 绝对定位子图（16:9 → 9/16 = 0.5625） - 别用
height: 0+padding-top后再设height: auto，这会破坏比例
移动端高清屏和带宽浪费问题不能只靠 CSS 缩放
CSS 让图片变小，但浏览器仍下载全尺寸文件——手机加载 4K 图不仅慢，缩放后还模糊。真正响应式得从源头控制：
- 用
srcset提供多分辨率版本：<img src="a-400.jpg" srcset="a-400.jpg 400w, a-800.jpg 800w, a-1200.jpg 1200w"> - 配
sizes告诉浏览器“在不同断点下我打算占多宽”：sizes="(max-width: 768px) 100vw, 50vw" -
loading="lazy"延迟非首屏图片加载，减少初始请求压力 - 别省略
alt——不仅是无障碍要求，某些 SSR 场景下缺失alt会导致 layout shift
最易被忽略的一点：所有这些方案都假设父容器本身是响应式的。如果外层用了 width: 1200px 固定宽度，里面再怎么设 max-width: 100% 也没用——图片缩放的基准错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
