vuetify中如何防止canvas溢出卡并使其响应？答案

【问题标题】：How to prevent canvas from overflowing the card and make it responsive in vuetify?vuetify中如何防止canvas溢出卡并使其响应？
【发布时间】：2021-07-04 08:06:11
【问题描述】：

上下文：

您好，我正在尝试在 vuetify 中使用 fabricjs 画布，并使其在所有屏幕上看起来都具有响应性。但目前，我面临一个问题，即画布没有根据卡片重新调整大小，而是溢出卡片。我尝试使用 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>

https://codepen.io/adatdeltax/pen/OJWOPBo

【问题讨论】：

这个问题与this不同吗？
为什么不使用基于画布的固定宽度？ codepen.io/Denizzer/pen/JjEOGQN?editors=1010
@Zim 两者相似，这里详细阐述了问题。
我尝试过使用fabricjs方法codepen.io/adatdeltax/pen/OJWxbwV，但需要更多关于是否有vuetify方法的见解，
Deniz 画布也将用于移动屏幕。所以固定宽度可能无法正确显示画布。

标签： vue.js vuetify.js fabricjs responsive

【解决方案1】：

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

Source

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

canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Example

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

.canvas-container {
  width: 100%;
  padding-top: 100%; // for 1:1 ratio
}

Example

【讨论】：