web-dev-qa-db-ja.com

画像全体をv-視差で表示するにはどうすればよいですか？

私は自分のプロジェクトにvuetifyを選びました。優れたフロントエンドフレームワーク。問題は、v-視差を作成して、トリミングせずに完全な画像を表示する方法です。一部のコードを以下に示します。完全なコードはコードペンでホストされています。

<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

ありがとう！

cssvue.jsvuetify.js
4
Tony Wang

これを解決するには、imgのheight="100%"を設定するだけです。

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

1
Shiva

height="100%"を使用してそれを解決できます

あなたは見ることができます それはここで働いています

これを機能させるには、親コンテナの高さも100％にする必要があることに注意してください

2
Ohgodwhy

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>
0
Henrique Van Klaveren

私はこのコンポーネントで同様の問題に直面しました。遅延読み込みの一部として画像をスワップしようとしましたが、コンポーネントが画像を正確にレンダリングしませんでした。代わりに、コンポーネントは画像を大幅にトリミングしました。 ：src = ""属性をすぐに正しい画像に設定し、幅よりも高い画像を選択すると機能します。

0
Ben Hoffmann