CSS如何固定hero区域背景宽度，仅在浏览器缩放时调整高度？

问题原因 #

你当前使用了background-size: cover属性，该属性的规则是缩放背景图直至完全覆盖整个容器，超出容器范围的部分会被直接裁剪，所以当浏览器窗口宽度缩小时，背景图左右边缘就会被裁剪，不符合你的需求。

解决方案 #

修改#hero的CSS属性，将background-size取值从cover替换为100% auto即可，修改后完整代码如下：

#hero{
  height: 100vh;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.089), rgba(0, 0, 0, 0.089)), url(images/backgroundheader.png) no-repeat center / 100% auto;
  /* 可选：添加背景色填充背景图高度不足时的空白区域 */
  background-color: #000;
}

参数说明 #

• 100% auto表示背景图宽度始终等于容器宽度，高度按照图片原始宽高比自动计算，完美满足你「左右内容完整展示、高度随窗口变化」的需求。
• 如果你希望背景图优先展示顶部内容，可将background-position的center改为top center，避免高度不足时裁剪顶部重要内容。
• 如果你可以接受hero区块高度自适应，可将height: 100vh改为min-height: 100vh，当窗口过宽导致背景图高度超过100vh时，hero会自动拉长展示完整背景图，不会出现上下裁剪。

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