根据断点设置图像高度

Question

Vuetify 的图像组件 (https://vuetifyjs.com/en/components/images/) 提供了一个 height 属性。如何根据当前断点保持该高度变量？有这样的东西就好了

<v-img 
  :height="img.height.xs" 
  :sm="img.height.sm"
  :md="img.height.md"
  :lg="img.height.lg"
  :xl="img.height.xl">
</v-img>

我必须使用计算属性来解决它，还是有办法仅使用 HTML 来解决它？我的意思是，我正在寻找像 TailwindCSS 方法 (https://tailwindcss.com/docs/height/#responsive) 之类的解决方案

<div class="h-8 sm:h-12 md:h-16 lg:h-20 xl:h-24"></div>

我创建了一个代码 sn-p 用于示例目的

https://codepen.io/dsm98861/pen/qBbXomN?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fcards%2F

Answer 1

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

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

<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 解决它，你可以这样设置 height 属性：

<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>

看完the article about breakpoints in Vuetify docs，你或许能想出更优雅更合适的解决方案。

Answer 2

为什么你只想使用 HTML？

不要忘记 use 可以改变窗口大小，您需要对其做出动态反应。这对于纯 HTML 是不可能的。这可以通过脚本实现，但它很复杂。使用媒体查询是一种简单而合适的工具。

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

@media #{map-get($display-breakpoints, 'md-only')}
  img
    width: 200px

@media #{map-get($display-breakpoints, 'sm-and-down')}
  img
    width: 100px