如何不保持宽高比将img拉伸适配父div尺寸，避免图片被裁剪

问题根因 #

Vuetify 内置的 v-img 组件默认使用 object-fit: cover 填充规则，会保持图片原有宽高比，裁剪超出容器的部分，因此你会看到图片被裁剪、内容展示不全的问题。

适配方案 #

需求1：不保留宽高比，强制拉伸完全匹配父容器尺寸 #

直接给 v-img 组件指定 object-fit 为 fill 即可，不需要修改现有CSS配置，父容器动态调整尺寸时图片会自动跟随拉伸：

<template>
  <div>
    <div ref="draggableContainer" id="draggable-container" @mousedown="dragMouseDown" :style="taille" >
      <!-- 新增object-fit="fill"属性 -->
      <v-img object-fit="fill" :src="images.caisse" id="boximage"></v-img>
    </div>
  </div>
</template>

如果项目开启了样式隔离（style标签加了scoped属性），属性设置不生效的话，可以补充以下CSS强制覆盖：

/* 如果你用的是less/scss预处理器，可以把>>>替换成::v-deep或者/deep/ */
#boximage >>> .v-img__img {
  object-fit: fill !important;
}

需求2：保留宽高比，完整展示所有图片内容（容器内可能出现上下/左右留白） #

直接给v-img添加contain属性即可：

<v-img contain :src="images.caisse" id="boximage"></v-img>

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