Vuetify: Fit V-Image Within the Screen Size

Vuetify dynamic height for v-img

The solution is to do a mix between computed and methods like so:

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

How to display images as the same size in a V-Card

I never found a 1 size fits all fix for this, but this is what I did to make it work out.

1. I imported all images to figma
2. I edited the images to all be the same size, then used the crop tool to "fit" them to the new "canvas" size
3. Within my v-img , I added "contain", which insured that the picture didn't get cut off or cropped when placing inside of a card.

Thanks for the help all.

Vuetify v-row background image height

If you want to use an image you could use:

position: absolute;
object-fit: cover;
width: 100%;
height: 100%;

Then this will grow to the size of the content (providing the parent is position: relative; whilst remaining proportional. If you adjust the padding on the content with media queries or similar you should be able to get the effect you are looking for.

Vuetify v-card fit all height possible in v-col

Check this codesandbox I made: https://codesandbox.io/s/stack-70836234-11sck?file=/src/components/CardHeight.vue

Remove align="center" from your v-row. Then just add the css height:100% to your v-card

UPDATE:
To set a fixed height to v-card only on mobile view you, can use vuetify's display breakpoints, in this case I applied them to the style attribute, but you can use it with any html attribute and any place with js.

<!-- Card 1 -->
<v-card :style="$vuetify.breakpoint.xsOnly ? 'height: 280px' : ''">
...
</v-card>

<!-- Card 2 -->
<v-card :style="$vuetify.breakpoint.xsOnly ? 'height: 280px' : 'height:100%'">
...
</v-card>

How to fill the window height and width in vuetify

Use fluid to get the full width of viewport, and fill-height to get the full height of the viewport. fluid is a prop, fill-height is a class.

<v-container fluid class="primary fill-height">
  <v-row>
    <v-col>
    </v-col>
  </v-row>
</v-container>

Vuetify issue - why doesn't the v-img component display anything despite the image being passed in from a valid source?

This is how I solve the problem,

<v-img :src="require('item.avatar')" aspect-ratio="1"></v-img>

It's should display the image correctly

Hope it help you

How to display the full image in v-parallax?

You could just set the img's height="100%" to solve that.

https://codepen.io/Shiv_UIDeveloper/pen/RxZNEa

---

Related Topics