How to display the full image in v-parallax?

Question

I choose vuetify for my project. Great frontend framework. Question is, how to make v-parallax to display the full image without croped. Some code shows below, and the full code is hosted in code pen.

<v-parallax
      src="https://blog-images-bucket.s3.amazonaws.com/media/private/carlos-muza-84523_u62x84y.jpg"
      height="600"
      jumbotron
></v-parallax>

https://codepen.io/tonywangcn/pen/WdENYQ

Thanks!

Solution 1

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

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

Solution 2

You could just use height="100%" to solve that

You can see it working here

Note that you need the parent containers to also have 100% height for this to work

Solution 3

The problem here isn't the height, it's the transform property which skews the width of the image. Unfortunately there's no prop in Vuetify's parallax component for adjusting the width of the image so all you can do is adjust the image dimensions or overwrite the transform property:

.v-parallax__image {
  transform: none !important;
  width: 100% !important;
}