How to display the full image in v-parallax?

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


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

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

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