A Vue.js 2’s component framework is called Vuetify. It seeks to offer simple, clear, and reusable components that make creating applications easy. With inspiration from other well-known frameworks like Material Design Lite, Semantic UI, Materialize.css and Bootstrap 4, Vuetify uses the Material Design design pattern of Google. Let’s read this article to learn about How to apply vuetify dynamic height for v-img tag.

How to apply vuetify dynamic height for v-img tag?

Solution 1: Use <v-img> tag

You can use <v-img> tag to apply Vuetify dynamic height for v-img tag and you also code a function in other to implement this idea, the source code look like this:

<div id="photoWrapper" class="photo-wrapper">
<v-img
:src="photo.url"
:contain="true"
:max-height="wrapperHeight()"
>
<template v-slot:placeholder>
<v-layout fill-height align-center justify-center ma-0>
<v-progress-circular
indeterminate
color="tertiary"
></v-progress-circular>
</v-layout>
</template>
</v-img>
</div>

Solution 2: Do as our method below

You also can do as our method below:

data() {
return {
mounted: false
}
},
mounted() {
this.mounted = true
window.addEventListener('resize', this.wrapperHeight)
this.wrapperHeight()
},
methods: {
wrapperHeight() {
if (!this.mounted) return
console.log(document.getElementById('photoWrapper').offsetHeight - 120)
const height = document.getElementById('photoWrapper').offsetHeight - 120
return height
}
}

We realized that we could change height or max-height of the image element by codding a function in other to get it’s parent height (or max-height) and minus 120px to get the particular size. The method was run as we expected. However the issue was that when user changed the window size the image didn’t response to new height, there was only parent block’s size being changed.

Solution 3: Try to make use of Vuetify dynamic height for v-img tag

Still trying to make use of Vuetify dynamic height for v-img tag, we ended up with a combination of computed property and method. Our method now looks like this:

data() {
return {
mounted: false,
containerHeight:
document.getElementById('photoWrapper').offsetHeight - 120
}
},
computed: {
wrapperHeight() {
if (!this.mounted) return
const height = this.containerHeight
return height
}
},
mounted() {
this.mounted = true
window.addEventListener('resize', _.debounce(this.handleResize, 100))
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
this.containerHeight =
document.getElementById('photoWrapper').offsetHeight - 120
}
}

Solution 4:

Excepting the solutions mentioned above, there is another solytion for you to apply Vuetify dynamic height for v-img tag. You have to make sure that the wrapperHeight property is a calculated one. That is true, and it performs better than creating it that way. Look at the following example to understand more about this solution:

computed: {
wrapperHeight() {
if (!this.mounted) return
console.log(document.getElementById('photoWrapper').offsetHeight - 120)
const height = document.getElementById('photoWrapper').offsetHeight - 120
return height
}
}

Note that  :max-height=”wrapperHeight” not :max-height=”wrapperHeight()”.

The solutions presented above are very simple, aren’t they? However, they are very useful for you. Your error will completely resolved and your program will run well without any errors if you use the above methods. Let’s apply them to get your desired results.

Conclusion

The above article is a summary of ways for or people who are in trouble with the problem How to apply Vuetify dynamic height for v-img tag. Hope you will find the right way to apply Vuetify dynamic height for v-img tag. If you have any problems or encountered an error that cannot be resolved, please contact us immediately. We will help you to find a solution quickly!

Read more

→ Amazing Methods For: ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema in vuejs