Vuetify有自己的预定义和可覆盖的断点。

我认为，解决问题的最正确方法是 使用计算道具 。根据你的代码，应该是这样的：

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="400"
      <v-img
        class="white--text align-end"
        src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
        :height="imageHeight"
      ></v-img>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  computed: {
      imageHeight () {
        switch (this.$vuetify.breakpoint.name) {
          case 'xs': return '200px'
          case 'sm': return '400px'
          case 'md': return '600px'
          case 'lg': return '800px'
          case 'xl': return '1000px'
})

如果您真的想解决它，只有HTML，您可以这样设置高度支柱：

<v-img
    class="white--text align-end"
    src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
    :height="$vuetify.breakpoint.xs 
                ? '200px' 
                : ($vuetify.breakpoint.sm
                    ? '400px' 
                    : ($vuetify.breakpoint.md
                        ? '600px'
                        : ($vuetify.breakpoint.lg
                            ? '800px' 
                            : '1000px'
></v-img>

在阅读 关于虚拟文档中断点的文章 之后，您可能会想出一个更优雅和更合适的解决方案。

您为什么只想使用HTML？

不要忘记，使用会改变窗口的大小，您需要对它做出动态的反应。这在普通HTML中是不可能的。这在脚本中是可能的，但它很复杂。使用媒体查询是一种简单而恰当的工具。

我不知道你用的是什么CSS预处理器。但是对于SASS，您可以使用基于断点的条件样式(编译为媒体查询)。

@media #{map-get($display-breakpoints, 'md-only')}