I have a photo gallery on my Vue page, and when a photo is selected, a dialog pops up by setting the selectedCard. However, the image does not fit the size of the screen and only half of it is visible. I have tried setting the CSS with max height or width to 100% in various places, but none of them seem to be working. How can I adjust my CSS so that the entire image can be viewed on the screen without needing to scroll?
//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>