CODEWITHSUNDEEP
vue.jsvuetify.js
Question3r
Question3r

Reputation: 3802

set image height based on breakpoint

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

Upvotes: 3

Views: 3794

Answers (2)

Alexander Shkirkov
Alexander Shkirkov

Reputation: 3857

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.

Upvotes: 3

farincz
farincz

Reputation: 5173

Why do you want to use HTML only?

Don't forget that use can change window size and you need to react on it dynamically. Which is not possible with plain HTML. This is possible with script but it's complicated. Using media queries is easy and proper tool.

I don't know what CSS pre-processor you are using. But for SASS you can use conditional styles based on breakpoint (compiled to media queries)

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

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

Upvotes: 0

Related Questions