弹性图片容器防变形的核心是守比例，需同时设置max-width: 100%和height: auto，移除内联宽高，flex子项加min-width: 0，固定尺寸容器用object-fit配合显式宽高，再结合srcset与sizes优化资源加载。
弹性图片容器防止变形失真，核心不是“撑满”而是“守比例”。关键在三点：约束尺寸上限、激活等比缩放、覆盖 flex 默认限制。
必须成对设置 max-width 和 height
只写 max-width: 100% 或只写 height: auto 都不完整。两者缺一不可：
-
max-width: 100%—— 设定宽度上限，防止溢出父容器 -
height: auto—— 激活浏览器按原始宽高比自动计算高度，避免拉伸或压扁 - 若同时设了内联 width/height（如
<img style="max-width:90%" style="max-width:90%">），CSS 的height: auto会被覆盖，必须移除这些属性
Flex 容器中要加 min-width: 0
当 <img> 是 display: flex 子项时，浏览器默认给它 min-width: auto，即“宁可撑破容器也不缩小”。结果就是图片卡在原始尺寸，max-width: 100% 失效。
- 显式写
min-width: 0才能解除这个锁定，让图片真正响应容器宽度 - 不需要额外写
flex-shrink: 1，它对<img>行为不稳定 - 配合
display: block可消除行内元素自带的基线间隙
固定尺寸容器里用 object-fit 精确控制
如果容器本身有明确宽高（比如头像框 width: 80px; height: 80px），仅靠 max-width 不够——图片可能留白或被压缩。
-
object-fit: cover—— 等比缩放后居中裁剪，填满整个容器（适合封面、头像） -
object-fit: contain—— 等比缩放后完整显示，留白（适合产品图、示意图） - 必须搭配显式宽高（
width和height都得有），否则object-fit不生效 - 旧版 Safari 需加
-webkit-object-fit前缀；IE 不支持，fallback 方案需用background-image
别忘了 srcset + sizes 控制加载源头
再完美的 CSS 缩放，也救不了小屏加载 2MB 大图的问题。防变形不只是视觉层，更是资源层：
-
srcset列出不同宽度的源图（统一用w单位，如"small.jpg 480w, medium.jpg 768w"） -
sizes描述该图片在不同断点下实际占多少视口宽度（如"(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"） - 漏写
sizes、混用w和x、或sizes与真实布局脱节，浏览器会直接忽略整个srcset，退化为只加载src
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
