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

Question

在我使用Nuxt.js的Vuetify.js应用程序中，我想为整个内容设置背景图像：

    <v-content>
      <v-img
        src="https://picsum.photos/id/11/500/300"
      >
        <v-container justify-center fill-height>
          <v-row justify="center" align="center">
            <v-col cols="12">
              <nuxt />
            </v-col>
          </v-row>
        </v-container>
      </v-img>
    </v-content>

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

是否有一种方法可以将图像的高度设置为视口高度的高度，以使我的内容垂直居中，并且窗口不会由于图像而向下滚动？

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

如果有时间运行，请在Github上使用最低限度的demo code。

Answer 1

高度：100vh？

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

https://www.w3schools.com/cssref/css_units.asp

Answer 2

不是真正的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>