Vuetify中如何去除图片边缘的空白区域？

问题根源 #

你的图片组件本身已经做了正确的全屏配置（v-col添加了pa-0，图片样式设置width:100%），但两侧仍存在空白，核心原因是App.vue里包裹路由视图的v-container组件默认带有内边距——即便加了fluid属性，这个默认padding依然会限制内容的宽度范围。

解决方案 #

修改App.vue中的v-container，移除默认内边距，有两种简单实现方式：

方式1：使用Vuetify内置的pa-0类

<v-main>
  <v-container fluid class="pa-0">
    <router-view />
  </v-container>
</v-main>

方式2：直接设置内联样式

<v-main>
  <v-container fluid style="padding: 0;">
    <router-view />
  </v-container>
</v-main>

效果验证 #

修改完成后，你的图片会完全铺满屏幕宽度，同时按钮的居中布局不会受到影响（保持当前代码即可）。

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