CODEWITHSUNDEEP
javascriptvuejs2vuetify.js
Somethingwhatever
Somethingwhatever

Reputation: 1358

Changing the height of Vuetify v-card image?

I am trying to change the height of vuetify v-card image dynamically through a v-select. My case is such that when i select 1/3, the height of card image should be 200px, for half it should be around 250px and for full around 300px. How can i achieve that?

I have created a codepen for demonstration: https://codepen.io/anon/pen/JQOqNP?editors=1010.

 <div id="app">
 <v-app id="inspire">
<v-card>
  <v-card-title>
  <v-layout>
    <v-spacer></v-spacer>
    <v-flex xs3>
      <v-select :items="items" label="Select Card Height" v- 
   model="flexSize"></v-select>
    </v-flex>
    </v-layout>
   </v-card-title>
   <v-divider></v-divider>
   <v-divider></v-divider>
    <v-card-text>
      <v-layout>
        <v-flex xs12 d-flex>
            <v-layout class="my-3 pt-1 justify-center">
              <v-flex xs4>
                  <v-card class = 'mx-2'>
                    <v-img src="https://via.placeholder.com/600x400? 
                   text=+">
                      <v-container>
                        <v-layout class="justify-center">
                          <v-flex class="text-xs-center">
                            <div class="dark--text text--lighten-3 title 
                  mt-5 py-3">Choose an image</div>
                          </v-flex>
                        </v-layout>
                      </v-container>
                    </v-img>
                    <v-card-text>
                      <div>lorem ipsum lorem ipsum  lorem ipsum  lorem 
                ipsum  lorem ipsum </div>
                    </v-card-text>
                  </v-card>
              </v-flex>
            </v-layout>
            <v-layout>
            </v-layout>
        </v-flex>
      </v-layout>
    </v-card-text>
   </v-card>
 </v-app>


     new Vue({
    el: '#app',
   data() {
   return {
     items: [
      '1/3',
      'Half',
      'Full'
    ],
    flexSize: '1/3',
     }
   },
})

Thank you everyone in advance.

Upvotes: 0

Views: 1082

Answers (1)

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

This should solve your problem :

on your card layout where you want to change the height add this :

<v-card :style="{height : flexSize == '1/3'?200+'px':flexSize =='half' ? 250 +'px':300+'px'}" </v-card>

Upvotes: 1

Related Questions