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

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

谢谢！

Answer 1

您可以使用 height="100%" 来解决这个问题

可以看到it working here

请注意，您需要父容器也有 100% 的高度才能工作

Answer 2

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

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

Answer 3

我遇到了这个组件的类似问题。我试图将图像作为延迟加载的一部分进行交换，但组件没有准确地渲染它。相反，该组件严重裁剪了图像。立即将 :src="" 属性设置为正确的图像，并选择一个比宽度高的图像。

Answer 4

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

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

Answer 5

尝试在 v-layout 和 v-flex 中插入 v-parallax。

<v-layout row wrap>
  <v-flex xs12 sm12>
    <v-parallax :src="getImageUrl('art01.jpg')">
      <v-layout column align-center justify-center>
        <h1>title</h1>
      </v-layout>
    </v-parallax>
  </v-flex>
</v-layout>

<script>
export default {
  methods: {
    getImageUrl(img) {
      return require(`~/assets/user/images/${img}`) 
    }
  },
}
</script>

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

How to display the full image in v-parallax?

css

vue.js

vuetify.js