CODEWITHSUNDEEP
cssvue.js
brian661
brian661

Reputation: 548

Vuetify: fit v-image within the screen size

My vue page have a photo gallery, and when a photo is selected, the dialog will jump out by setting the selectedCard.
While the image is not fitting the size of the screen.
I tried to set css with max height or width with 100% anywhere I can, but none of them are working.
How can I fix my css so that the whole image can be view on the screen without scrolling?
Screen cap: only half of the image can be shown only half of the image can be shown 

//Dialog component    
<template>
  <v-dialog :value="selectedCard" scrollable fullscreen hide-overlay>
    <v-card v-if="selectedCard">
      <v-container grid-list-sm fluid>
        <v-layout align-space-around row fill-height>
          <v-flex id="mainCardPanel">
            <v-layout align-space-around column fill-height>
              <v-flex xs12>
                <MyCard class="mainCard" :card="selectedCard"></MyCard>
              </v-flex>
              <v-flex xs12>
                <v-btn> SomeButton </v-btn>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-dialog>
</template>
// MyCard component
<template>
  <v-card flat tile class="d-flex justify-center" >
    <v-img :contain="true" :src=card.imageUrlHiRes
        :lazy-src=card.imageUrl class="grey lighten-2 Card">
      <template v-slot:placeholder>
        <v-layout fill-height align-center justify-center ma-0>
          <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
        </v-layout>
      </template>
    </v-img>
  </v-card>
</template>

Upvotes: 8

Views: 36995

Answers (4)

DAVID AJAYI
DAVID AJAYI

Reputation: 2154

Using pure HTML appears to even be simpler and better for me. The vuetify just complicate simple things sometimes. Use v-col, div, any block...

<v-row class="fill-height" 
    justify="center" 
    align="center" 
    style="background-image: url('card.imageUrlHiRes'); 
    background-size: cover;" >
          
  </v-row>

Upvotes: 0

NayDwe
NayDwe

Reputation: 659

If you want to appear full image use :cover="true" in <v-img>. If you you want to appear the whole image, you can put follow CSS.

.v-image__image{
 background-size:100% 100%;
}

This is not recommended way.Because image's ratio will be wrong.

Upvotes: 1

Balaji
Balaji

Reputation: 10997

add css width and hieght to 100%

img { 
    width:100%; 
    height:100%; 
    }

Upvotes: 1

MistaPrime
MistaPrime

Reputation: 1677

Try using vh for your image height. Perhaps this may work:

img {
  height:100vh;
}

Upvotes: 3

Related Questions