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
//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>
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. This is not recommended way.Because image's ratio will be wrong. Show activity on this post. Using pure HTML appears to even be simpler and better for me. The vuetify just complicate simple things sometimes.
While the $vuetify object supports SSR (Server-Side Rendering) including platforms such as NUXT, the breakpoint service detects the height and width values as 0. This sets the initial breakpoint size to xs and in some cases can cause the layout to snap in place when the client side is hydrated in NUXT.
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. This is not recommended way.Because image's ratio will be wrong.
The breakpoint and conditional values return a boolean that is derived from the current viewport size. Additionally, the breakpoint service mimics the Vuetify Grid naming conventions and has access to properties such as xlOnly, xsOnly, mdAndDown, and others.
Try using vh for your image height. Perhaps this may work:
img {
height:100vh;
}
add css width and hieght to 100%
img {
width:100%;
height:100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With