图片拉伸变形的根源是width/height强制覆盖原始宽高比；object-fit需配合明确尺寸才生效，常用cover/contain等值控制缩放裁剪方式，且IE不支持需降级处理。
图片拉伸变形的根源是 width/height 强制覆盖了原始宽高比
当给 <img> 设置了固定 width 和 height（比如 width: 200px; height: 150px;），浏览器会无条件拉伸或压缩图像来填满该区域，不管原图是横版、竖版还是正方形。这不是 bug，是 CSS 的默认行为。
常见错误写法：
img {
width: 100%;
height: 200px;
display: block;
}这种写法对响应式容器尤其危险——父容器变宽，图片就被横向拉扁。
object-fit 是 img 和 video 的原生比例控制方案
object-fit 必须配合明确的尺寸（width/height 或 max-width/max-height）才生效，它不改变容器大小，只决定内容如何“装进去”。常用值有：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放并裁剪，填满容器（最常用，类似背景图的background-size: cover） -
object-fit: contain：等比缩放并完整显示，可能留白 -
object-fit: scale-down：取none和contain中更小的渲染结果（适合不确定原图大小时） -
object-fit: none：完全不缩放，可能溢出
注意：object-fit 对 <img> 有效，但对通过 background-image 设置的图片无效——那是 background-size 的职责。
必须同时设置 width/height 才能触发 object-fit 生效
只写 object-fit: cover 而不设尺寸，等于没写。浏览器不知道“覆盖谁”，因为 <img> 默认是内容尺寸（intrinsic size）。
推荐组合写法（响应式安全）：
img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center; /* 可选：控制裁剪锚点，默认 center */
}如果容器高度不固定，可用 aspect-ratio 配合：
img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}这样即使父容器宽度变化，高度也会自动按比例计算，再用 object-fit 确保图像不拉伸。
兼容性与 fallback 方案
object-fit 在现代浏览器中支持良好（Chrome 31+, Firefox 36+, Safari 10.1+, Edge 16+），但 IE 完全不支持。如果项目需兼容 IE，有两个务实选择：
- 用
background-image替代<img>，靠background-size: cover实现类似效果（但失去alt、SEO 和懒加载能力） - 用 JS 检测支持性，不支持时降级为固定比例容器 +
max-width/max-height+margin: auto居中（仅保证不拉伸，可能留白）
检测代码示例：
if ('objectFit' in document.documentElement.style === false) {
document.body.classList.add('no-object-fit');
}然后在 CSS 中写：
.no-object-fit img {
max-width: 100%;
max-height: 200px;
margin: auto;
display: block;
}实际项目里最容易被忽略的是：忘了给 <img> 显式声明 height 或 aspect-ratio，导致 object-fit 形同虚设。它不是“自动防拉伸开关”，而是一个“装箱规则”——得先有箱子，才能谈怎么装。
