css - 如何在 vuetify 中设置如下链接图像的图像？

Question

我想量化我的v-img喜欢你在下图中看到的那个。

有没有办法制作类似于您使用 vuetify 看到的图像的东西v-img。

 <div class="row">
      <v-img style="margin:2px" max-height="301" max-width="380"
      :key="index" v-for="(image, index) in post.userPostImg" 

      :src="$store.state.baseURL + '/news/' + image"> </v-img>
    </div>

标签： cssvue.jsnuxt.jsvuetify.js

Answer 1

使用 prop 创建两行no-gutters，第一行包含一个图像，另一行包含包含 3 个图像的三列：

  <v-row no-gutters>
      <v-col cols="12">
        <v-img :src="`https://picsum.photos/500/300?image=51`" aspect-ratio="1">

        </v-img>
      </v-col>
    </v-row>
    <v-row no-gutters>
      <v-col cols="4">
        <v-img :src="`https://picsum.photos/500/300?image=52`" aspect-ratio="1">

        </v-img>
      </v-col>
      <v-col cols="4">
        <v-img :src="`https://picsum.photos/500/300?image=53`" aspect-ratio="1">

        </v-img>

      </v-col>
      <v-col cols="4">
        <v-img :src="`https://picsum.photos/500/300?image=54`" aspect-ratio="1">

        </v-img>

      </v-col>

    </v-row>

现场演示