如何制作图像填满<v-main>窗口

Question

这是我第一次使用 vuetify 创建自己的网站。问题是：我想将图像放置到我的主页上，并且它必须完全填满 窗口。我不知道该怎么做。

有谁知道解决这个问题的关键吗？

我的主页结构很简单：

  <v-app>

    <v-navigation-drawer expand-on-hover rail>...</v-navigation-drawer>

    <v-main class="d-flex flex-column">
      <v-container class="h-100 bg-grey-lighten-4" width="100vw">
        <v-img
          src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"
          height="100%"
          cover
        ></v-img>
      </v-container>
    </v-main>

    <v-footer class="d-flex flex-column" app>... </v-footer>

  </v-app>

但结果不是我所期望的： 在此输入图片描述 图像没有填满剩余区域的宽度。

Answer 1

限制内容不拉伸整个视口是您使用 v-container 的原因之一。即使您不知道这一点，弄清楚为什么 anything 看起来像这样的正确方法是使用浏览器的开发工具来检查 DOM，在这种情况下将显示 v-container 有一个

max-width 

属性阻止全屏宽度。您可以添加自己的 CSS 来覆盖此属性，或者在 Vuetify 的 API 中找到 prop

fluid

完成同样的事情

液体
删除视口最大宽度尺寸断点。

<v-container fluid class="h-100 bg-grey-lighten-4">