Vuetify v-dialog set size to v-img size - vue.js

Question

I want to center an image (passed as props) in a dialog and the size of the dialog should be the same as the image. Maybe with some offset because of the toolbar with the x to close the dialog.
Does someone know how to remove the scrolling and set the correct size for the dialog?
Code
<template>
<v-dialog
v-model="showDialog"
:height="picture.PicHeight"
:width="picture.PicWidth"
>
<v-card>
<v-toolbar dense color="elevation-0">
<v-spacer></v-spacer>
<v-btn icon color="black" #click.native="closePictureDialog">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
<v-row no-gutters>
<v-col cols="12">
<v-row align="center" justify="center">
<v-img
:src="picture.Pic"
:height="picture.PicHeight"
:width="picture.PicWidth"
contain
></v-img>
</v-row>
</v-col>
</v-row>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: "PictureDialog",
props: {
showDialog: {
type: Boolean,
default: false
},
picture: {
type: Object,
default: () => {}
}
},
data() {
return {
//
};
},
methods: {
closePictureDialog() {
this.$emit("onClosePictureDialog");
}
}
};
</script>
Best regards,
A.Mehlen

Answer 1

The scrolling is happening because you need no-gutters on the inner <v-row>...
<v-dialog
v-model="showDialog"
:height="picture.PicHeight"
:width="picture.PicWidth">
<v-card>
<v-toolbar dense color="elevation-0">
<v-spacer></v-spacer>
<v-btn icon color="black" #click.native="closePictureDialog">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
<v-row no-gutters>
<v-col cols="12">
<v-row no-gutters align="center" justify="center">
<v-img
:src="picture.Pic"
:height="picture.PicHeight"
:width="picture.PicWidth"
contain
></v-img>
</v-row>
</v-col>
</v-row>
</v-card>
</v-dialog>
https://codeply.com/p/hFIuHqYRFk