Question

我为我的项目选择了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>

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

谢谢！

Answer 1

您可以使用height="100%"来解决

您可以看到it working here

请注意，您需要父容器也具有100％的高度才能使其正常工作

Answer 2

这里的问题不是高度，而是<form id="nonce-form" novalidate action="PATH/TO/PAYMENT/PROCESSING/PAGE" method="post"> @csrf <fieldset> <span class="label">Card Number</span> <div id="sq-card-number"></div> <div class="third"> <span class="label">Expiration</span> <div id="sq-expiration-date"></div> </div> <div class="third"> <span class="label">CVV</span> <div id="sq-cvv"></div> </div> <div class="third"> <span class="label">Postal</span> <div id="sq-postal-code"></div> </div> </fieldset> <button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">Pay $1.00</button> <div id="error"></div>  <input type="hidden" id="card-nonce" name="nonce"> </form>属性使图像的宽度倾斜。不幸的是，Vuetify的视差组件中没有用于调整图像宽度的道具，因此您所要做的就是调整图像尺寸或覆盖transform属性：

transform

Answer 3

你可以设置img＆＃39; height="100%"来解决这个问题。

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

Answer 4

我遇到了与此组件类似的问题。我试图将图像作为延迟加载的一部分进行交换，但组件没有准确地呈现它。相反，该组件严重裁剪图像。立即将：src =“”属性设置为正确的图像，并选择高于宽幅图像的图像。

Answer 5

尝试在v-layout和v-flex内插入v-视差。

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

如何在v-parallax中显示完整图像？

5 个答案: