html - 设置为cover时显示背景图，设置为contain时不显示？

Question

我正在构建一个 React 应用程序，并且正在编写响应式 sass 代码以使我的网站看起来更漂亮。我正在尝试缩放我的背景图像，并且我正在尝试使用 background-size: contain;属性(property)这样做。

我遇到了一个我无法修复的错误...当背景大小设置为“覆盖”时，图像显示没有问题。当我将该属性更改为“包含”时，图像不再显示。图像正在根据控制台加载，我可以在检查器中看到它作为我附加的主体上的样式。是什么赋予了？为什么图片不显示？这是相关的 CSS。

body {
  min-height: 100vh;
  height: auto;
  width: 100vw;
  max-width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 auto;
  background: center / contain no-repeat url("../img/boulder.jpg");
}

Answer 1

我不确定您在背景属性中使用的语法，但这似乎达到了预期的结果:https://codesandbox.io/s/goofy-nobel-tmvno?file=/src/styles.css:67-138

  background-position: contain;
  background: no-repeat center url("../img/boulder.jpg");