set image height based on breakpoint

Question

Vuetify's image component ( https://vuetifyjs.com/en/components/images/ ) provides a height prop. How can I keep that height variable based on the current breakpoint? It would be nice to have something like this

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

Do I have to do it with a calulated property or is there a way to solve it with HTML only? By that, I mean I'm looking for a solution like the TailwindCSS approach ( https://tailwindcss.com/docs/height/#responsive )

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

I created a code snippet for example purposes

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

Could you explain what exactly are you trying to do? Do you want to change image height depending on user's screen size? — dreamwalker
yes, I want to change the image height depending on the user's screen size — Question3r

dreamwalker dreamwalker · Accepted Answer · 2020-06-27T11:51:36

Vuetify has its own predefined and overridable breakpoints.

I think, the most correct way to solve your problem is to use computed props. According to your codepen, it should be something like this:

<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'
        }
      },
    }
})

If you are really want to solve it HTML-only, you could set height prop this way:

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

You may be able to come up with a more elegant and suitable solution after reading the article about breakpoints in Vuetify docs.

set image height based on breakpoint

2 Answers