使用Vuetify网格创建图像布局

Question

尝试创建具有水平和垂直图像的图像概述。如果图片是垂直的，我想以更大的高度显示，而水平的则以更大的宽度显示。 到目前为止，我有一个概述，其中显示了图片，如图片：

           <v-layout row wrap>
                <!-- Edit page -->


                <v-flex v-for="inspiration in inspirations"
                        :key="inspiration.id"
                        xs12 sm6 md4
                        class="inspiration-card">
                    <v-card v-if="inspiration.position == 'horizontal'">
                        <v-card-media
                                @mouseover="hoverPin(inspiration.id)" @mouseleave="hoverReset()"
                                :src="inspiration.src"
                                height="300px"
                                width="100%"
                        >
                            <v-btn v-show='activePin == inspiration.id' normal right center text-aligncenter
                                   @click="openDialog(inspiration.id)"
                                   class="pin-button"
                            ><i class="fas fa-thumbtack"></i> Pin</v-btn>
                        </v-card-media>

                    </v-card>
                    <v-card v-else>
                        <v-card-media
                                @mouseover="hoverPin(inspiration.id)" @mouseleave="hoverReset()"
                                :src="inspiration.src"
                                height="300px"
                                width="100%"
                        >
                            <v-btn v-show='activePin == inspiration.id' normal right center text-aligncenter
                                   @click="openDialog(inspiration.id)"
                                   class="pin-button"
                            ><i class="fas fa-thumbtack"></i> Pin</v-btn>
                        </v-card-media>

                    </v-card>
                </v-flex>
            </v-layout>

我想去： 对于这样的事情：