防图片失真需HTML声明原始尺寸并配合CSS控制：用width/height属性提供插值基准，容器设aspect-ratio或object-fit（contain/cover），禁用max-width:100%冲突，sizes必须精准匹配断点渲染宽度。
img { max-width: 100%; height: auto; } 为什么在固定容器里还是变形
这组样式本身没错，但它只管“缩放”，不管“容器是否给足空间”。当父容器是固定宽高（比如 width: 300px; height: 200px;），而图片原始比例不是 3:2 时，max-width: 100% 会让图片宽度压到 300px，但 height: auto 算出的高度可能 ≠ 200px——结果要么留白，要么被容器裁掉（如果父容器设了 overflow: hidden）。
真正要防失真，得让浏览器从布局阶段就知道“这张图该按什么比例占位”，而不是靠缩放硬塞。
- 别只依赖 CSS 缩放，必须在 HTML 层面声明原始尺寸：
<img width="1200" height="800">，哪怕它最终被 CSS 压小 - 固定容器内不用
max-width: 100%，改用object-fit: contain或cover，但前提是容器本身有明确宽高或aspect-ratio - 检查父容器是否用了
display: flex或grid：它们默认的min-width: auto会锁住图片最小宽度，导致缩放失效；加min-width: 0在<img>上才有效
object-fit: contain 和 cover 在响应式容器中怎么选
object-fit 不是万能胶，它只在容器有**确定尺寸上下文**时才起作用。如果容器宽高都是 auto，或者只写了 width: 100% 没写 height，那 object-fit 根本不触发。
两种模式行为差异很实际：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: contain：完整显示图片，四周可能留白。适合产品图、图表、文字说明配图——你不能接受任何裁剪 -
object-fit: cover：等比填满容器，超出部分裁掉。适合封面图、头像、背景图——你更在意视觉饱满度，允许边缘丢失 - 必须配合容器的
width和height（或aspect-ratio: 16/9），否则无效；iOS Safari 老版本要加-webkit-object-fit - 别和
max-width: 100%同时用在一个<img>上，冲突会导致渲染异常或回退到默认拉伸
sizes + srcset 没配对，图片照样失真
很多人以为写了 srcset 就算响应式了，其实没配 sizes，浏览器就按 100vw 推算所需图片宽度——比如在手机上加载一张 2400px 宽的图，再缩放到 375px 显示。这等于经历两次重采样：服务端降质一次，浏览器插值再损一次。
正确做法是让 sizes 精确反映图片在各断点下的**实际渲染宽度**：
- 如果 CSS 中
@media (max-width: 768px) { .card-img { width: 100vw; } }，对应sizes="(max-width: 768px) 100vw, 50vw" -
sizes值必须是带单位的长度（vw、px、em），不能写100%或空值 - 所有
<source>都没匹配上时，浏览器静默 fallback 到<img src>，你根本看不到错误——用开发者工具的 Network 面板看实际加载的是哪张图，才能确认逻辑是否生效
aspect-ratio 是现代防失真的最简解法
如果你控制得了容器结构，aspect-ratio 是目前最干净、最可控的方式。它不依赖图片原始尺寸，也不靠 padding 技巧模拟，而是直接告诉浏览器：“这个盒子天生就是 4:3”。
用法简单，但有几个硬约束：
- 必须用在图片的**父容器**上，不是
<img>自身：.img-wrapper { aspect-ratio: 4/3; } - 容器需配合
overflow: hidden（防contain留白溢出）或object-fit（决定如何填充） - IE 和旧版 Safari 不支持，可加回退：
aspect-ratio: 4/3; padding-top: 75%;+ 绝对定位子元素，但注意padding-top的百分比基于父容器宽度，仅适用于块级流 - 别在 Flex/Grid 子项上直接写
aspect-ratio同时又设flex: 1——某些浏览器会忽略aspect-ratio，优先按 flex 分配空间
失真问题从来不在图片本身，而在浏览器布局与渲染两个阶段的错位。最常被忽略的是：HTML 层的 width/height 属性不是可有可无的装饰，它是浏览器计算插值起点的唯一依据；而 sizes 不是锦上添花，它是避免双重缩放的必要开关。
