Javascript 将背景图像高度设置为视口高度

在我使用

Vuetify.js

的

Nuxt.js

应用程序中，我想为整个内容设置一个背景图像：

问题是内容没有垂直居中，因为图像占据了窗口的整个高度，因此我需要向下滚动才能看到内容

有没有办法将图像的高度精确设置为视口的高度，以便看到垂直居中的内容，并且窗口不会因为图像而向下滚动

如果页面内容很长，我应该能够向下滚动，仍然可以看到设置为页面背景的图像

---

Github上的极简版，以防您有时间运行它。

不是真正的vue javascript解决方案，而是CSS解决方案。以下设置将生成一个完整的页面背景图像，并且内容在没有滚动条的情况下垂直对齐

编辑：使用静态资源

在模板中：

<v-content 
  :style="`background-image: url(${require('../assets/image.jpg')})`" 
  class="fill-height bg-image">
  <v-container justify-center fill-height>
    <v-row justify="center" align="center">
      <v-col cols="12" justify="center" style="border: 1px solid;">
        <nuxt />
      </v-col>
    </v-row>
  </v-container>
</v-content>

以您的风格：

<style>
 .bg-image {
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   background-size: cover;
 }
</style>

.bg图像{
背景重复：无重复；
背景位置：中心；
背景附件：固定；
背景尺寸：封面；
}

不是真正的vue javascript解决方案，而是CSS解决方案。以下设置将生成一个完整的页面背景图像，并且内容在没有滚动条的情况下垂直对齐

编辑：使用静态资源

在模板中：

<v-content 
  :style="`background-image: url(${require('../assets/image.jpg')})`" 
  class="fill-height bg-image">
  <v-container justify-center fill-height>
    <v-row justify="center" align="center">
      <v-col cols="12" justify="center" style="border: 1px solid;">
        <nuxt />
      </v-col>
    </v-row>
  </v-container>
</v-content>

以您的风格：

<style>
 .bg-image {
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   background-size: cover;
 }
</style>

.bg图像{
背景重复：无重复；
背景位置：中心；
背景附件：固定；
背景尺寸：封面；
}

高度：可能是100vh

vw相对于视口宽度的1%*
相对于视口高度1%的vh*

高度：可能是100vh

vw相对于视口宽度的1%*
相对于视口高度1%的vh*

---

---

我可以尝试提供帮助，但请提供一些在线提琴等，以便我们不必克隆回购等。我理解，但对于这个特定的示例，我无法在Codepen上复制它，例如，为什么？它在SPAI中也会起同样的作用，我可以尝试提供帮助，但请提供一些在线提琴等，这样我们就不必克隆回购等。我理解，但对于这个特定的例子，我无法在Codepen上复制它，例如，为什么？你的解决方案和我接受的一样好。如果我接受另一个，希望它是可以的，因为它更适合我的实际应用程序，我在静态文件夹中有图像+1安全。你在哪里加的100vh？通常100vh仍然会留下一个滚动条，因为顶部有appbar。哦，如果你想要一个静态资源，你只需要在vue模板中直接使用：style分配背景css，而不是在中。非常感谢你通过帖子和评论提供的信息。我克隆了您的回购协议，v-img上的

height=“100vh”

对我不起作用。我还有一个滚动条。但是如果它对你有效，那么问题就解决了：）你告诉我这件事很好。但我不知道为什么它在我没有滚动条的情况下工作。如果以后我看到一个奇怪的行为，我会选择你的解决方案。你的解决方案和我接受的一样好。如果我接受另一个，希望它是可以的，因为它更适合我的实际应用程序，我在静态文件夹中有图像+1安全。你在哪里加的100vh？通常100vh仍然会留下一个滚动条，因为顶部有appbar。哦，如果你想要一个静态资源，你只需要在vue模板中直接使用：style分配背景css，而不是在中。非常感谢你通过帖子和评论提供的信息。我克隆了您的回购协议，v-img上的

height=“100vh”

对我不起作用。我还有一个滚动条。但是如果它对你有效，那么问题就解决了：）你告诉我这件事很好。但我不知道为什么它在我没有滚动条的情况下工作。如果以后我看到奇怪的行为，我会选择你的解决方案。我注意到你的解决方案有效，但当我的页面内容较长时，我无法向下滚动阅读内容，而图像设置为背景。我注意到你的解决方案有效，但当我的页面内容较长时，当图像设置为背景时，我无法向下滚动阅读内容