如何用CSS调整Banner图片铺满整页？仓库链接：trevormolano.bitbucket.io

嘿，我碰到过好几个类似的情况，你用background-image只看到顶部窄条，大概率是容器没设置足够高度导致的，咱们来一步步解决：

方案1：继续用你当前的<img>标签写法 #

你现在是把图片放在<header>里的<a>标签中，给<header>和<img>加上这些样式就行：

/* 先重置浏览器默认的内外边距，避免样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100vw; /* 占满整个浏览器视口宽度 */
  height: 100vh; /* 占满整个浏览器视口高度，实现整页铺满 */
  overflow: hidden; /* 防止图片超出容器范围 */
}

header a img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键！保持图片比例的同时铺满容器，不会拉伸变形 */
}

设置后，图片会跟着<header>铺满整个页面，object-fit: cover能保证图片不会被挤变形，只会裁剪超出的部分，保留核心显示区域。

方案2：改用background-image实现（你之前尝试的方式） #

如果更倾向用CSS背景图，重点是给<header>设置足够高度，再调整背景属性：

/* 同样先重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100vw;
  height: 100vh; /* 这是核心！没有高度的话，容器只会缩成内容高度，所以只显示窄条 */
  background-image: url('images/cycleWorld.png');
  background-size: cover; /* 让背景图覆盖整个容器 */
  background-position: center; /* 让图片居中显示，避免裁剪掉重要部分 */
  background-repeat: no-repeat; /* 禁止图片平铺 */
}

之前的问题就是<header>没设置高度，默认它的高度只由内部内容撑开，所以背景图只显示了一小条。加上height: 100vh就能让容器占满整个浏览器窗口了。

额外小提示 #

• 如果之后不想铺满整页，只是铺满宽度、高度自适应图片比例，可以把height: 100vh换成padding-top: 56.25%（比如16:9的图片，用高度/宽度的百分比），容器会按图片比例自动调整高度。
• 记得检查图片路径！images/cycleWorld.png要确保相对于你的HTML或CSS文件的路径是正确的，不然图片加载不出来也会显示异常。

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