CSS修改header背景图片尺寸失效，如何实现响应式适配

背景图效果不符合预期的核心原因 #

• 未给.header设置明确高度，当前容器高度仅由内部文本内容撑开，背景图的显示区域受限于容器高度，无法完整展示设置的尺寸
• background-size属性如果仅写单个值100%，默认代表宽度100%，高度按原图比例自适应，很容易出现高度不匹配容器的问题，要么显示裁切要么出现留白

两种常用的响应式适配方案 #

方案1：固定header高度为500px，背景图不变形无留白

适合需要固定header高度的场景，背景图会等比例缩放完全覆盖容器，核心代码如下：

.header {
  overflow: hidden;
  color: white;
  text-align: center;
  background-image: url("https://cdn.discordapp.com/attachments/830964942320435211/875439626972692550/image2.png");
  /* 新增配置 */
  height: 500px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

方案2：header高度随宽度自适应，完整显示背景图

适合需要背景图完全展示不裁切的响应式场景，无需固定高度：

.header {
  overflow: hidden;
  color: white;
  text-align: center;
  background-image: url("https://cdn.discordapp.com/attachments/830964942320435211/875439626972692550/image2.png");
  /* 新增配置 */
  padding-top: 30%; /* 数值根据你的背景图宽高比调整，比如图宽高比为10:3就设30% */
  background-size: 100% auto;
  background-repeat: no-repeat;
}

如果就是需要强制把背景图拉伸为宽度100%、高度500px（忽略原图比例可能变形），直接给.header添加background-size: 100% 500px属性即可。

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