如何用 CSS Viewport 单位 vh 和 vw 实现全屏背景图像布局？

在网页设计中，让背景图像完整覆盖用户可视区域是常见的视觉需求。CSS Viewport 单位中的 vh 和 vw 为这一需求提供了原生且高效的解决方案。vh 表示视口高度的百分之一，vw 表示视口宽度的百分之一，它们随浏览器窗口变化实时换算，避免了传统百分比布局中父级容器尺寸不确定的麻烦。理解这两个单位的计算规则，是构建全屏背景的前提。

使用 background 属性配合 vh 与 vw 的基础方案

最直观的做法是为某个块级容器设定宽高等于视口尺寸，再利用 CSS 的 background 相关属性将图片拉伸或裁剪至填满。例如创建一个专门的背景层 div，赋予它 width:100vw 和 height:100vh，同时设置 background-image、background-size:cover 以及 background-position:center。cover 值会保持图像宽高比，自动截取多余部分以覆盖整个容器，因此无论屏幕比例如何，都不会出现空白区域。

这种写法的优点在于语义清晰，且背景图不占据文档流，不会影响其他内容的排版。不过在 Windows 等平台，垂直滚动条会占用视口宽度，此时 100vw 可能略大于实际可见区域，导致出现横向滚动条。一个实用的改进是在body上隐藏溢出，或者使用 width:100% 替代 100vw 来规避该问题。下面是一段可直接运行的基础示例代码：

<style>
  * { margin: 0; padding: 0; }
  .full-bg {
    width: 100vw;
    height: 100vh;
    background-image: url('https://ipipp.com/demo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>
<div class="full-bg"></div>

利用 img 标签与 object-fit 实现全屏背景

除了背景图方式，我们也可以直接使用 <img> 元素并通过 object-fit 属性达成类似效果。这种方法将图像作为真实 DOM 节点插入，有利于 SEO 与屏幕阅读器识别，也方便后续用 JavaScript 操作图像对象。核心思路是将 img 设为固定定位，宽高同样取 100vw 与 100vh，然后声明 object-fit:cover，浏览器便会按覆盖模式调整图像渲染区域。

与 background 方案相比，img 加 object-fit 在响应式裁剪上表现一致，但需注意 z-index 层级控制，避免遮挡正常内容。如果页面有其他交互元素，应将该背景图置于底层并添加 pointer-events:none 以防止误触。以下示例展示了如何构建一个不干扰用户的全屏图像背景：

<style>
  .bg-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
  }
</style>
<img class="bg-img" src="https://ipipp.com/photo.jpg" alt="全屏背景">
<main>
  <h1>页面内容</h1>
  <p>这里是正常文档流中的文字。</p>
</main>

上述两种思路都可实现全屏背景，但 object-fit 在旧版 IE 中不被支持，若项目需兼容老旧浏览器，应优先采用 background 方案或引入 polyfill。此外，在移动端 Safari 上，地址栏展开收起会改变 vh 的实际值，造成背景图轻微跳动，可借助 height:100% 配合父容器绝对定位来缓和。

移动端兼容与动态视口单位的进阶处理

现代浏览器引入了 dvh、svh、lvh 等动态视口单位以解决移动端工具栏导致的尺寸跳动，但在不支持这些新单位的设备上，仍要回退到 vh。我们可以使用 CSS 自定义属性与 @supports 规则做渐进增强：先定义基础高度为 100vh，再在支持 dvh 时覆盖为 100dvh。这样既保证了老设备可用，又让新设备体验更平滑。

另一个常见坑是横向溢出。由于 100vw 包含滚动条宽度，在内容超高出现纵向滚动条时，页面整体会被撑出横向滚动。解决办法是用 max-width:100% 限制，或在根容器使用 overflow-x:hidden。下表对比了不同单位在典型场景下的表现：

综合来看，使用 CSS Viewport 单位创建全屏背景图像，核心在于选对容器尺寸定义方式与图像填充属性。通过 vh、vw 打底，辅以 object-fit 或 background-size，并在移动端做好动态单位回退，就能以纯 CSS 输出稳定、高性能的全屏视觉层，免去脚本计算的负担。

CSS_viewportvhvw修改时间：2026-08-14 06:18:27