Vue.js 如何防止画布溢出卡并使其在vuetify中响应？

上下文：

您好，我正在尝试在vuetify中使用fabricjs canvas，使其在所有屏幕上都具有响应性。 但目前，我面临一个问题，画布不是基于卡片重新调整大小，而是溢出卡片。 我尝试过使用v-responsive，但它没有将纵横比应用于画布，可能是，我使用它的方式不正确

任何建议都会有帮助

这就是现在发生的事情

这就是我想要实现的目标

结构

模拟：

代码

这就是我到现在为止一直在尝试的

<v-layout>
  <v-flex xs12>
    <v-container class="red" fluid>
      <v-layout row wrap align-center justify-center>
        <v-flex xs3 sm3 md3 class="ma-2" class="purple">
          <v-card flat tile class="yellow">
            <v-card-title
              id="fabric-canvas-wrapper"
              class="green pb-0 justify-center"
            >
              <v-responsive aspect-ratio="4/3" class="mx-auto px-3">
                <canvas id="c"> </canvas>
              </v-responsive>
            </v-card-title>

            <v-card-text class="blue text-xs-center py-0">
              <p class=".body-2 pa-2 text-truncate">Kangaroo Valley Safari</p>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-flex>
</v-layout>

袋鼠谷野生动物园

画布元素可以通过样式表任意调整大小，其位图随后受“object fit”CSS属性的约束

画布元素的宽度/高度与画布元素位图的宽度/高度不同。这意味着您只能使用CSS样式来解决此问题

画布{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

如果要保持纵横比，可以使用填充技巧

.canvas容器{
宽度：100%；
填充顶部：100%；//比例为1:1
}

---

这个问题与其他问题不同吗？为什么不使用基于画布的固定宽度@Zim和Zim都很相似，在这里对问题进行了更详细的阐述。我尝试过使用fabricjs方法，但需要了解是否有vuetify方法，Deniz画布也将用于移动屏幕。因此，固定宽度可能无法正确显示画布。