如何以 v 视差显示完整图像?

Ton*_*ang 6 css vue.js vuetify.js

我为我的项目选择了 vuetify。很棒的前端框架。问题是,如何使 v-parallax 显示完整图像而不进行裁剪。下面显示了一些代码,完整的代码托管在代码笔中。

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

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

谢谢!

小智 5

这里的问题不是高度,而是transform扭曲图像宽度的属性。不幸的是,Vuetify 的视差组件中没有用于调整图像宽度的道具,因此您所能做的就是调整图像尺寸或覆盖转换属性:

.v-parallax__image {
  transform: none !important;
  width: 100% !important;
}
Run Code Online (Sandbox Code Playgroud)


Shi*_*iva 2

你可以只设置 imgheight="100%"来解决这个问题。

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