vuetify视差流体模板问题

Question

我正在尝试设置一个流体模板以用于响应式设计视口。 在中等视口 (md) 上，显示效果很好。 ...见codepen 3个v-card（四舍五入）连续...（视差背景图像高度为380px）

但是它不能在较小的视口（ sm 或 xs ）上正确缩放 所有的v-catds都没有显示，因为视差背景图的高度没有调整（还是380px的高度）

如何正确设置它，以便将列中的所有 v-card 放入较小的视口中

HTML

    <div id="app">
      <v-app id="inspire">
        <v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="380">
          <v-layout row wrap align-center justify-center>
            <v-flex xs12 sm12 md3>
                <v-card class="elevation-0 rounded-card">
                  <v-card-title primary-title class="layout justify-center">
                    <h1>TITLE 1</h1>
                    </v-card-title>
                  <v-card-text>
                    ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus enim et justo eleifend pharetra. Nam consectetur, nulla in viverra mattis, ipsum libero faucibus odio, at eleifend mauris arcu non nibh. Aliquam congue augue sed sapien tristique, eget faucibus risus pulvinar. Nullam ut nunc felis.
                  </v-card-text>
                </v-card>
             </v-flex>
             <v-flex xs12 sm12 md3 offset-md1>
                <v-card class="elevation-0 rounded-card">
                  <v-card-title primary-title class="layout justify-center">
                    <h1>TITLE 2</h1>
                    </v-card-title>
                  <v-card-text>Proin felis diam, placerat ut lacinia viverra, dapibus ut sapien. Curabitur non dolor sed tortor aliquet lacinia. Maecenas ut porta velit, vel elementum sem. Quisque tincidunt vel nisl quis dignissim. Suspendisse accumsan leo sed neque sodales, in congue metus egestas. Maecenas molestie, eros.
                  </v-card-text>
                </v-card>
             </v-flex>
                     <v-flex xs12 sm12 md3 offset-md1>
                <v-card class="elevation-0 rounded-card">
                  <v-card-title primary-title class="layout justify-center">
                    <h1>TITLE 3</h1>
                    </v-card-title>
                  <v-card-text>
                    Quisque non felis massa. Suspendisse vel aliquam orci, eget aliquet est. In efficitur nisi vel massa volutpat, vitae varius velit volutpat. Duis non maximus nunc, ut tincidunt eros. Aliquam erat volutpat. Vestibulum libero justo, euismod et massa finibus, tincidunt euismod libero.
                  </v-card-text>
                </v-card>
             </v-flex>
          </v-layout>
        </v-parallax>
      </v-app>
    </div>

CSS

    .rounded-card {
      border-radius: 50px;
    }
    .card__text {
      font-size: 1.2em;
      padding-top: 0;
      padding-bottom: 3em;
    }

JS

    new Vue({
      el: '#app',

    })

Answer 1

解决了

将 v 视差高度设置为 100%

<v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100%">

并添加到 CSS 中

.parallax {
   min-height: 380px;
}