CSS如何实现图片填充不被拉伸_采用object-fit cover属性

object-fit: cover 能防止图片拉伸，因为它保持图片原始宽高比进行等比缩放，直至短边撑满容器，再居中裁剪显示，不改变图片本身比例。

object-fit: cover 为什么能防止图片拉伸

object-fit: cover 的核心逻辑是「保持宽高比 + 填满容器」。它不会压缩或拉伸图片本身，而是像裁剪一张海报贴进相框：等比缩放图片，直到它的短边刚好撑满容器对应方向，再居中截取可见区域。所以原始比例始终保留，但可能丢失边缘内容。

• 容器必须有明确的 width 和 height（比如 px、%、rem），否则 cover 无参照可言
• 仅对替换元素生效（<img alt="CSS如何实现图片填充不被拉伸_使用object-fit cover属性" >、<video></video>），普通 <div> 加了没反应 <li>不影响图片文件尺寸或加载行为，纯渲染层处理 </li><h3>常见错误：图片还是变形了？检查这几点</h3><p>现象：加了 <code>object-fit: cover，但图片看起来仍被压扁或拉长。
  • 忘记给父容器设固定尺寸 —— 比如只写了 width: 100% 却没设 height，此时容器高度由图片原始尺寸决定，cover 失效
  • 父容器用了 flex 或 grid，但子项没设 align-self: stretch 或没触发拉伸（尤其在 flex-direction: column 下）
  • 图片外层套了 <figure></figure> 或 <div>，但样式冲突（比如该容器有 <code>overflow: hidden 被误删，或设置了 max-width: 100% 干扰计算）
  • 使用了 background-image 却误配 object-fit —— 这是无效的，背景图要用 background-size: cover

  和 background-size: cover 的关键区别

  虽然效果相似，但二者适用场景完全不同：

  • object-fit: cover 用于 <img alt="CSS如何实现图片填充不被拉伸_使用object-fit cover属性" > 标签，图片是 DOM 元素，可被选中、有语义、支持 alt、能响应式懒加载（loading="lazy"）
  • background-size: cover 用于 CSS 背景，图片只是装饰，无法被屏幕阅读器识别，也不能设置宽高属性控制加载尺寸
  • 性能上：如果图片需 SEO 或可访问性，必须用 <img alt="CSS如何实现图片填充不被拉伸_使用object-fit cover属性" > + object-fit；若只是视觉装饰（如 banner 背景图），用 background-size 更轻量
  • 注意：background-size: cover 默认居中，而 object-fit: cover 也默认居中，但可通过 object-position 微调裁剪起始点（比如 object-position: 20% 30%）

  兼容性与降级方案

  object-fit 在现代浏览器中支持良好（Chrome 31+、Firefox 36+、Safari 10.1+、Edge 16+），但 IE 完全不支持。

  立即学习“前端免费学习笔记（深入）”；

  • 不需要 polyfill，IE 用户极少且通常接受降级为原图显示（拉伸或留白）
  • 若必须兼容旧版 Safari（<10.1），可用 background-image + padding-top 技巧模拟固定宽高比容器，再配 background-size: cover
  • 真正容易被忽略的是：某些 CMS 或编辑器会自动给 <img alt="CSS如何实现图片填充不被拉伸_使用object-fit cover属性" > 加内联 width/height 属性，这会覆盖 CSS 的尺寸控制，导致 object-fit 表现异常 —— 需手动移除或用 width: auto; height: auto; 覆盖

  图片是否真正“不拉伸”，取决于你有没有切断它和容器之间的尺寸耦合。一旦容器尺寸不可控，cover 就只是个摆设。