Hero图使用background-size:contain属性出现显示异常求助

我来帮你梳理下问题所在，以及对应的解决方案：

首先，你遇到的现象其实是background-size: contain的正常特性导致的：

• contain的作用是保持图片原始宽高比，将其缩放至刚好能完整放入容器内。如果图片的宽高比和你的.header容器（75vh高、100%宽）的宽高比不匹配，容器的某一侧就会出现空白区域；你一开始没加background-repeat: no-repeat，浏览器就会用重复的图片填充这些空白，所以出现了重复显示的情况。
• 当你加上no-repeat后，空白区域就显现出来，这应该就是你说的“显示异常”。

另外，你的.header设置了padding-top: 2rem，而默认的box-sizing: content-box会让这个padding额外增加容器的总高度（也就是容器实际高度是75vh + 2rem），这也可能导致背景图的显示范围和你预期的不一致。

下面分两种常见需求给出解决方案：

需求1：让背景图填满整个Hero容器（允许裁剪部分图片） #

如果你的核心需求是背景图完全覆盖.header，不需要完整显示图片的每一部分，推荐使用background-size: cover，配合居中定位，这样图片会按比例缩放至完全覆盖容器，超出部分自动裁剪，不会有重复或留白：

.header { 
  background-image: url(../img/bg.jpg); 
  height: 75vh; 
  padding-top: 2rem; 
  max-width: 100%; 
  background-size: cover; /* 替换contain为cover */
  background-repeat: no-repeat; 
  background-position: center center; /* 让图片居中显示，保证主体内容在容器内 */
}

需求2：必须完整显示背景图（允许留白，但布局更合理） #

如果你一定要完整展示整张图片，那background-size: contain是正确的选择，但需要调整几个细节来优化显示效果：

1. 给html添加box-sizing: border-box，让容器的height:75vh包含padding，避免总高度超出预期：

html{ 
  font-size: 62.5%; 
  box-sizing: border-box; /* 新增这一行，让容器高度包含padding */
}

2. 调整背景位置，让图片在容器内居中，避免留白出现在奇怪的位置：

.header { 
  background-image: url(../img/bg.jpg); 
  height: 75vh; 
  padding-top: 2rem; 
  max-width: 100%; 
  background-size: contain; 
  background-repeat: no-repeat; 
  background-position: center center; /* 居中图片，优化留白位置 */
}

如果希望图片贴顶部显示，把background-position改成center top即可。

另外，如果你不想背景图覆盖padding区域，可以给.header加上background-origin: content-box，这样背景图只会在容器的内容区域显示，不会延伸到padding里。

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