Создание макета изображения с использованием сетки Vuetify - PullRequest
Новая
       10

Создание макета изображения с использованием сетки Vuetify

0 голосов
/ 06 сентября 2018

Попытка создать обзор изображения, где у меня есть горизонтальные и вертикальные изображения. Если изображение вертикальное, я хочу, чтобы оно отображалось с большей высотой и в горизонтальном с большей шириной. Пока у меня есть обзор, который показывает изображения, как на картинке: 

           <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>

Я хочу перейти от: Now Чтобы что-то вроде этого: Where to go

...