Aligning images inside a v-carousel component-CodePudding

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  v-for="(item,i) in items" :key="i">
                <v-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;
   }
}

CodePudding user response：

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  v-for="(item,i) in items" :key="i">
                <div >
                    <v-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%;
                }
            }
        }

CodePudding user response：

You can center items in this way:

Make carousel item flex. Max height should be 100% of parent node height;
Make image responsive:

max-width: 100%;
height: auto;

Max height of image should be 100% of parent;

Take a look on Code Snippet, enlarge it to see differences.

.mob-one-carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 1px solid blue;
}

.mob-one-carousel-img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

<div id="carousel-container">
  <div style="height: 40vh; border: 1px solid tomato;">
    <div >
      <img  src="https://dummyimage.com/100x100/000/fff" style="max-height: 40vh;" />
    </div>
  </div>
</div>

<hr />

<div id="carousel-container">
  <div style="height: 40vh; border: 1px solid tomato;">
    <div >
      <img  src="https://dummyimage.com/600x400/000/fff" />
    </div>
  </div>
</div>