CSS如何实现图片自动裁剪填充_巧用object-fit属性控制尺寸

用 object-fit 能让图片在固定容器内自动缩放、裁剪或拉伸，不靠 JS、不写额外 wrapper、不破坏语义；它专为解决图比容器大/小/比例不对而生，仅作用于 img、video 等替换元素，需配合明确宽高，IE 不支持。图片变形或留白？object-fit 是唯一解直接说结论：用 object-fit 能让图片在固定容器内自动缩放、裁剪或拉伸，不靠 JS、不写额外 wrapper、不破坏语义。它就是为解决「图比容器大/小/比例不对」而生的 CSS 属性。常见错误是只设 width/height，结果图片被拉伸变形，或者加了 background-image 后无法响应式缩放、丢失 alt 文本。这些都不是图片本身的问题，而是没选对控制方式。object-fit 只作用于替换元素（<img>、<video>），对普通 <div> 无效必须配合明确的宽高（如 width: 200px; height: 150px;），否则无裁剪/填充效果可言IE 完全不支持，如需兼容，得 fallback 到 background-size: cover + background-imageobject-fit: cover 和 contain 的区别在哪这是最常混淆的两个值。核心差异就一条：是否允许裁剪。cover 强制填满容器，等比缩放后裁掉溢出部分；contain 确保完整显示，等比缩放后留白。选错会导致关键内容被切掉，或卡片高度不一致。立即学习"前端免费学习笔记（深入）"； 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。