Aligning images inside a v-carousel component

Issue

My v-carousel has a set height of 40vh. I have a bunch of different sized images inside the carousel. I dont want any of the images cut off so I have passed "contain" to the v-image along with a max height matching the carousel container.

The issue is now some of the more "landscape" style images are sitting at the top of the carousel container, I would like all images to align to the center just as the carousel default has justified all images to the center. Ive tried to access the v-img through css but setting the image to align-center on the grid does not seem to be doing anything. I know I am accessing the img element because when I place display:none inside the css class, it works.

Is there a way to align the images inside the carousel?

<div id="carousel-container">
        <v-carousel 
            height="40vh"
            show-arrows-on-hover 
            cycle
            >
            <v-carousel-item class="mob-one-carousel-item" v-for="(item,i) in items" :key="i">
                <v-img class="mob-one-carousel-img" :src="item.src" contain max-height="40vh"></v-img>
            </v-carousel-item>
    </v-carousel>
</div>

CSS grid that is not working.

.mob-one-carousel-item {
   display: grid;

   .mob-one-carousel-img {
       align-self: center;
   }
}

Solution

Solution:

I just wrapped the image inside another div which was set to 100% height of the v-carousel-item. That div was set to grid and then aligned/justified the images.

Then the height of the image itself was set to auto.

<v-carousel-item class="mob-carousel-item" v-for="(item,i) in items" :key="i">
                <div class="mob-carousel-img-container">
                    <v-img class="mob-carousel-img" :src="item.src" contain max-height="40vh"></v-img>
                </div>
            </v-carousel-item>

.mob-carousel-item {

            .mob-carousel-img-container {
                height: 100%;
                width: 100%;
                display: grid;
                justify-items: center;
                align-items: center;
                .mob-carousel-img {
                    align-self: center;
                    height: auto;
                    max-height: 100%;
                }
            }
        }

Answered By - elementmg