如何实现占满屏幕顶部的div并在其中插入铺满整个容器的图片

核心实现逻辑 #

• 首先需要消除浏览器默认边距，避免顶栏出现留白
• 顶栏设置宽度100%即可占满横向全部视口区域
• 通过object-fit属性（img标签方案）或background-size属性（背景图方案）实现图片铺满容器且不变形

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通栏顶栏示例</title>
  <style>
    /* 全局重置，清除浏览器默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 通栏顶栏容器 */
    .top-banner {
      width: 100%;
      /* 顶栏高度可按需调整，若需要自适应高度可替换为 aspect-ratio: 16/3 等比例值 */
      height: 220px;
    }
    /* 方案1：img标签插入图片时的样式 */
    .top-banner img {
      width: 100%;
      height: 100%;
      /* 保持图片比例铺满容器，超出部分自动裁剪 */
      object-fit: cover;
      /* 调整图片显示锚点，居中显示重点内容 */
      object-position: center;
    }
    /* 方案2：背景图方案（无需插入img标签时使用，需注释掉方案1的img样式）
    .top-banner {
      background: url("https://roco.studio/wp-content/uploads/2014/12/img_banner-thin_mountains.jpg") center/cover no-repeat;
    }
    */
  </style>
</head>
<body>
  <div class="top-banner">
    <!-- 方案1保留该img标签，方案2删除即可 -->
    <img src="https://roco.studio/wp-content/uploads/2014/12/img_banner-thin_mountains.jpg" alt="山景横幅">
  </div>
  <div class="page-content">
    其他页面内容
  </div>
</body>
</html>

常见问题排查 #

• 如果顶栏四周仍有白边，检查是否遗漏了全局margin、padding的重置代码
• 如果图片出现拉伸变形，确认是否添加了object-fit: cover（img方案）或background-size: cover（背景图方案）
• 移动端适配需要确保添加了<meta name="viewport">标签，避免移动端出现横向滚动条

内容的提问来源于stack exchange，提问作者helloimboi