css - 背景图像响应性和适合性问题

Question

我在使页眉中的背景图片看起来正确时遇到问题。

现在，它被设置为:

.hero {
   background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center;
   background-size: cover;
   background-position: center;
}

我尝试了多种 css 变体来让它工作，但无法弄清楚。我希望该部分显示完整图像并在浏览器缩小时继续显示(而不是将其切断)。截至目前，它正在切割图像的顶部和底部，直到我缩小然后显示整个图像。当我进一步收缩时，它会切断侧面。

当我将 bg 大小切换为包含时，我在小型设备上的图像周围留下了一堆空间。任何帮助表示赞赏。

链接:http://solatube.solabrite.com/premier-dealer

Answer 1

为此，.hero 的纵横比需要与图像的纵横比相匹配。您可以通过使用表示图像纵横比的百分比量向元素应用填充来实现此目的。您可以通过将图像高度除以其宽度 (500/1280 = 39.0625%) 来获得该百分比。

添加这个CSS

.hero {
  height: 0;
  padding-top: 39.0625%;
}