如何以垂直视差显示完整图像？

Question

我为我的项目选择 vuetify。很棒的前端框架。问题是，如何使 v-parallax 在不裁剪的情况下显示完整图像。部分代码如下所示，完整代码托管在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

谢谢！

原文由 Tony Wang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以设置 img 的 height="100%" 来解决这个问题。

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

原文由 Shiva 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Abd El-Ghazali 发布，翻译遵循 CC BY-SA 4.0 许可协议