object-fit必须配合明确宽高才能生效，否则无作用；常见错误是只设object-fit却未给img或其父容器设置width和height，导致尺寸塌陷或flex压缩，正确做法是显式设定尺寸或使用aspect-ratio锁定比例。

直接说结论：object-fit 必须配合明确的宽高才能生效，否则它什么都不会做——不是浏览器不支持，而是没尺寸可“fit”。

为什么设置了 object-fit: cover 但图片还是被拉伸？

常见错误是只写 object-fit，却忘了给 <img> 或其父容器设 width 和 height。比如：

• <img src="a.jpg"> 默认是 width: auto; height: auto，此时 object-fit 没作用对象
• 父容器用 flex 或 grid 布局但没约束尺寸（如没设 min-height 或 aspect-ratio），<img> 实际渲染尺寸仍为 auto
• 用了 max-width: 100% 却没配 height: auto 或固定高度，导致高度塌陷

正确做法：要么给 <img> 显式设 width 和 height（如 width: 100%; height: 300px），要么让父容器有确定尺寸（例如 .card { aspect-ratio: 4/3; width: 100%; }）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

contain 和 cover 的实际裁剪边界在哪？

object-fit 本身不控制裁剪位置，只决定缩放策略；裁剪区域由 object-position 决定，默认是 50% 50%（居中）。这意味着：

• object-fit: cover 时，图片居中裁剪——关键内容（如人脸）若偏左或偏上，可能被切掉
• object-fit: contain 时，object-position 影响的是图片在留白区域内的对齐方式（比如 object-position: top left 会让图片贴左上角显示）
• 想确保某部分不被裁，得结合 object-position 调整，例如人物头像常用 object-position: center top 避开肩膀被切

响应式场景下怎么避免关键内容被裁？

纯靠 object-fit: cover 在小屏上风险很高，尤其当图片构图不居中时。更稳妥的做法是：

• 服务端提供多尺寸图 + srcset，让浏览器按视口选最接近比例的源图，减少裁剪量
• 用 aspect-ratio 锁定容器比例（如 aspect-ratio: 16/9），再配 object-fit: cover，比用固定 height 更可靠
• 对重要图片（如产品主图、头像），优先用 contain + 背景色填充留白，而不是硬裁
• 测试时别只看桌面端——真机上拖动页面检查裁剪是否切掉文字、Logo 或人脸眼睛

最容易被忽略的一点：很多框架（如 Bootstrap 的 .img-fluid）会重置 height 为 auto，这直接废掉 object-fit 效果。必须手动覆盖或换用带尺寸约束的 class。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！