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!
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With