[Vuejs]-Aligning images inside a v-carousel component

by

1👍

✅

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%;
                }
            }
        }

Leave a comment