css - 验证视差流体模板问题

Question

我正在尝试设置一个用于响应式设计视口(viewport)的流体模板。 在中等视口(viewport) (md) 上显示很好。 ... 见 codepen 3张v-card(圆 Angular )排成一排...(视差背景图高度为380px)

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

我怎样才能正确设置它，以便在较小的视口(viewport)中显示列中的所有 v-cards

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

已解决

将垂直视差高度设置为 100%

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

并添加到 CSS 中

.parallax {
   min-height: 380px;
}