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%;
}

Answer 2

如果您使用background-size: cover，则图像将缩放，直至覆盖整个可用空间。

也许可以使用background-size: contain进行尝试，然后图片将缩放，直到涵盖 x 或 y 可用空间的维度。

但：如果您的图片与其尝试覆盖的区域具有相同的宽高比，则这两者都不应成为问题。

背景图片响应和适合度问题

2 个答案: