In my v-carousel, I have set a height of 40vh. The images inside the carousel are of different sizes, and I want to ensure that none of them get cut off. To achieve this, I used "contain" for the v-image along with a maximum height matching the carousel container.
However, I am facing an issue where some of the more "landscape" style images are positioned at the top of the carousel container. I would like all images to align to the center, similar to how the carousel default justifies all images to the center. I tried accessing the v-img through CSS and setting the image to align-center on the grid, but it doesn't seem to be working. I am able to confirm that I am accessing the img element because when I use display:none within 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>
The following CSS grid code is not achieving the desired alignment:
.mob-one-carousel-item {
display: grid;
.mob-one-carousel-img {
align-self: center;
}
}