Vuetify中v-img自带padding-bottom:200%的原因及小屏适配方法

问题原因 #

你使用的是竖版iPhone素材，宽高比为1:2，Vuetify的<v-img>组件默认会读取原图宽高比，给内部v-responsive__sizer元素添加padding-bottom: 200%实现比例占位。小屏断点下右侧<v-col>宽度变为100%视口宽度时，200%的padding会让容器高度达到两倍视口宽，直接超出视口范围。

可行解决方案 #

方案1：添加视口高度约束（修改量最小，无需改动原有逻辑） #

给<v-img>添加max-height属性，使用视口高度单位vh限制最大高度，适配不同屏幕尺寸：

<v-img max-height="70vh" contain src="../assets/iphone.png"></v-img>

可根据导航栏高度调整70vh的数值，保证图片总高度不会超出视口剩余可视区域。

方案2：显式指定宽高比+容器约束（适配性最优） #

显式声明图片宽高比，避免Vuetify自动计算的比例出现异常，同时给外层列添加高度约束：

<v-col
  cols="12"
  sm="4"
  class="d-flex flex-column justify-center align-center"
  style="max-height: 80vh;"
>
  <v-img aspect-ratio="1/2" max-height="100%" contain src="../assets/iphone.png"></v-img>
</v-col>

方案3：覆盖默认占位样式（完全匹配你测试的禁用padding效果） #

在scoped样式中使用深度选择器，覆盖<v-img>内部默认的占位逻辑：

<style scoped>
.center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Vuetify3 深度选择器，Vuetify2可替换为::v-deep或/deep/ */
:deep(.v-responsive__sizer) {
  padding-bottom: 0 !important;
}
:deep(.v-img__content) {
  position: static !important;
}
</style>

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