如何控制图像不被拉伸_OBJECT-FIT属性保持图片比例-html教程-PHP中文网

直接结论：只写object-fit: contain或cover没用，必须给img或其父容器设可计算宽高，否则浏览器无基准执行缩放；常见失效原因包括img缺尺寸、父容器height: auto、flex中align-items: stretch拉伸、safari旧版不支持aspect-ratio等。

如何控制图像不被拉伸_object-fit属性保持图片比例

直接结论：只写 object-fit: contain 或 object-fit: cover 没用，必须给 <img> 或其父容器设好可计算的宽高，否则浏览器连“往哪 fit”都不知道。

为什么加了 `object-fit` 还是拉伸？

常见现象是图片在 flex 容器里被撑高、在响应式卡片中压扁、或 Safari 里完全没反应。根本原因不是属性写错了，而是：<img> 自身没有明确尺寸约束，或者父容器高度为 auto 且未通过其他方式提供参照。

浏览器执行 object-fit 时，需要一个「已知大小的盒子」作为基准——它不负责算尺寸，只负责在已有盒子里怎么摆图。如果盒子高度是 0 或未定义（比如父级没设 height，又没用 aspect-ratio），那 contain 就只能缩到看不见，cover 就会按默认 height: auto 去拉伸。

检查是否漏了 width 或 height：至少一个得是确定值（px、rem、% 都行）
Flex 容器里尤其危险：若父级 display: flex + align-items: stretch，子 <img> 只写了 width: 100% 没写 height，就会被强制拉满容器高度
Safari 旧版本（≤15.2）不支持 aspect-ratio，若你靠它兜底，object-fit 实际就失去了尺寸来源

`object-fit: contain` 和 `object-fit: cover` 怎么选？

两者行为逻辑完全不同，不能互换：

object-fit: contain：等比缩放图片，确保完整显示，四周留白。适合证件照、商品详情图这类「必须看清全貌」的场景
object-fit: cover：等比缩放并裁剪，填满整个容器。适合 banner、头像、卡片封面——但得接受顶部/底部/左右可能被切掉

注意：cover 在容器又高又窄时，会把图片缩得极小再裁，用户可能以为图没加载；contain 在容器又宽又矮时，图片会缩成一个小点居中，同样有体验风险。

别混用 max-width: 100% 和 width: 100%：Safari 旧版会因此触发重排异常，导致 contain 表现错乱。

父容器没高度，怎么安全兜底？

当无法控制父容器显式设 height（比如响应式布局、CMS 输出不确定内容），推荐用 aspect-ratio + object-fit 组合，兼容性差时 fallback 到 padding-bottom 技巧：

现代写法：.img-wrapper { aspect-ratio: 4 / 3; width: 100%; } .img-wrapper img { object-fit: cover; width: 100%; height: 100%; }
兼容写法（IE / Safari ≤15.2）：.img-wrapper { position: relative; width: 100%; padding-bottom: 75%; } .img-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

注意：padding-bottom 的百分比基于父容器宽度，所以必须配合 position: absolute 才能让图片贴满；别忘了 aspect-ratio 值必须带空格（4 / 3），写成 4/3 会解析失败。