object-fit: cover可强制图片等比缩放并填满容器，需配合明确宽高、overflow: hidden及width: 100%; height: 100%; display: block，IE不支持时可用background-image替代。

用 object-fit: cover 配合固定宽高最直接

图片在容器内留黑边，本质是它没“撑开”或“裁掉多余部分”。object-fit: cover 就是干这个的：保持原始比例，等比缩放后裁剪溢出区域，确保 100% 填满容器四边。

但前提是容器本身必须有明确的 width 和 height（不能是 auto 或依赖内容），否则 img 拉不到指定尺寸。

• 容器需设 overflow: hidden，防止裁剪部分意外溢出造成滚动条或布局错乱
• img 必须设 width: 100%; height: 100%，仅设 width: 100% + height: auto 会保留原始比例但留黑边
• 别忘了移除 img 默认的 display: inline 行为，加 display: block 防止基线间隙

为什么 background-image + background-size: cover 更稳

当你要的是视觉填充而非语义化图片（比如 banner、hero 区），用背景图反而更少踩坑。它不参与文档流，不受 img 的替换元素限制，也不受外边距/内边距干扰。

关键点不是“能不能”，而是“要不要保留 标签”——如果 SEO、可访问性（alt 文本）、懒加载或响应式 srcset 不是刚需，背景图方案更干净。

• 容器必须显式声明 width 和 height，否则背景不可见
• 加 background-position: center 确保焦点区域居中，避免重要人物/文字被裁掉
• 慎用 background-size: 100% 100%：它会强行拉伸，导致图片变形

position: absolute 是兜底方案，但得控好参考系

当你遇到老浏览器兼容问题，或需要叠加文字/按钮且不想被 object-fit 的裁剪逻辑干扰布局时，绝对定位是可靠选择。但它对父容器要求严格：必须设 position: relative，否则 top: 0; left: 0 会相对于视口定位。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

这个方案本质是“把图钉死在容器左上角，再拉满”，所以裁剪逻辑得靠 object-fit 或 overflow: hidden 配合，不能只靠定位。

• 父容器漏写 position: relative 是最常见错误，结果图飞到页面顶部左侧
• 若容器高度由内容撑开（如 height: auto），该方案会失效——必须是固定或视口单位高度（如 100vh）
• z-index 要合理设置，否则文字可能被图片盖住

容易被忽略的细节：路径、格式与降级

铺不满有时根本不是 CSS 问题。比如 src 路径错、图片本身分辨率太低（在大屏上被放大后模糊+边缘发虚，看起来像黑边），或者用了 WebP 但旧版 Safari 不支持。

尤其在 React + CSS Modules 环境下，相对路径容易出错；建议统一用 import 或 require() 引入图片，让构建工具校验路径有效性。

• 开发时打开浏览器开发者工具，检查 Network 面板确认图片是否 200 加载成功
• 在 img 上临时加 border: 1px solid red，快速判断是“没铺满”还是“图本身就有透明/空白边缘”
• 加 background-color 到容器上，能立刻区分是图片未覆盖，还是图片自身带 alpha 通道或白边

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