如何让图片填满Vuetify的<v-main>容器？首次使用求助

问题原因分析 #

你的代码里有两个关键问题导致图片无法填满宽度：

1. <v-container>默认自带左右内边距，直接限制了图片的可用宽度
2. 设置width="100vw"会让容器宽度等于整个视口，但<v-main>已经自动扣除了导航抽屉的占用宽度，这会导致容器超出v-main范围，反而出现留白

修正方案 #

按以下步骤调整代码：

• 给<v-container>添加fluid属性，让它自适应父级（也就是<v-main>）的宽度
• 移除width="100vw"，改用pa-0清除容器的所有内边距（或者px-0只清除左右内边距）
• 给<v-img>加上width="100%"，明确让它占满容器宽度
• 给<v-main>添加h-100，确保它能占满视口高度（如果需要图片铺满整个v-main高度的话）

修正后的完整代码 #

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

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

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

额外注意事项 #

• 如果导航抽屉是固定展开的，<v-main>会自动调整宽度，无需额外设置
• 若图片仍有异常，可检查是否有其他父元素的margin/padding干扰，或者给<v-img>手动加style="object-fit: cover;"（不过Vuetify的cover属性已经包含这个样式）
• 尽量避免用100vw设置容器宽度，它会忽略导航抽屉、滚动条等元素的宽度，容易导致布局错位

内容的提问来源于stack exchange，提问作者zx p