最稳方案是max-width: 100%; height: auto，可确保图片等比缩放不溢出不变形；object-fit: contain适用于固定尺寸容器；aspect-ratio为现代浏览器推荐解法。
直接用 max-width: 100% + height: auto 就行，这是最稳、最兼容、最不容易出错的方案。
为什么不能只写 width: 100%
只设 width: 100% 会让图片强行拉满容器宽度，但高度不会联动变化——浏览器默认按图片原始尺寸渲染，结果就是高度卡死在固有值上，要么留白、要么溢出、要么被父容器裁切。更糟的是，如果父容器是 flex 项，默认 min-width: auto 会阻止图片收缩，导致缩放完全失效。
必须搭配 height: auto，它告诉浏览器：“高度别管我，按原始宽高比算”。这样宽度一变，高度自动等比响应。
- 错误写法：
width: 100%; height: 100%→ 直接锁死宽高，必然变形 - 错误写法：
width: 100%单独使用 → 高度不随动，布局失控 - 正确写法：
max-width: 100%; height: auto→ 安全缩放，小图不拉伸，大图不溢出
object-fit: contain 适合固定尺寸容器
当你已经给 <img> 设了明确的 width 和 height（比如 width: 300px; height: 200px），又想让图片完整显示且保持比例，就该用 object-fit: contain。
它不改变图片原始尺寸，只控制“怎么往框里塞”：等比缩放后居中显示，四周可能留白。注意两点：
- 必须先有明确的宽高声明，否则
object-fit没作用对象 - 如果父容器是 flex/grid，要检查是否被
min-width: auto或min-height: auto锁住，需显式加min-width: 0或min-height: 0 - 配合
object-position: center可微调对齐，比如object-position: 20% 30%把焦点偏移到左上区域
现代方案：aspect-ratio 控制容器本身
如果你能接受较新浏览器（Chrome 88+、Firefox 89+、Safari 15.4+），aspect-ratio 是最干净的解法：它让容器自己“记住”比例，图片只需填满即可。
例如：.img-container { width: 100%; aspect-ratio: 16/9; }，再让图片 width: 100%; height: 100%; object-fit: cover，就能稳定呈现 16:9 区域，不依赖图片原始尺寸。
注意：aspect-ratio: attr(width)/attr(height) 这种动态取值目前支持极差，别用；也别指望它在 IE 或旧版 Safari 工作。
- 优势：容器比例可控，图片换源不影响布局
- 风险：Safari 15.3 及更早版本不支持，iOS 15.4 以下基本不可用
- 回退方案：用伪元素 + padding-top 百分比模拟，但代码更重
容易被忽略的细节
很多问题不是 CSS 写错了，而是上下文没理清：
- 父容器必须有明确宽度（比如
width: 100%、max-width: 600px），否则max-width: 100%没参照系 -
<img>默认是 inline 元素，底部会有几像素空白（基线对齐导致），加display: block或vertical-align: top消除 - 用
srcset+sizes配合响应式缩放，否则高清屏下图片模糊、小屏下加载大图浪费带宽 - 如果图片是背景图，
background-size: contain或cover更合适，但语义和可访问性不如<img>
真正麻烦的从来不是“怎么写”，而是“在哪写”——样式必须作用于 <img> 本身，而不是只改父容器；而且得确认父容器的尺寸约束是否生效。测一遍小屏、大屏、图片原始尺寸小于/大于容器的场景，基本就稳了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
