在 v-carousel 组件内对齐图像

Question

我的 v-carousel 设置高度为 40vh。我在轮播中有一堆不同大小的图像。我不希望任何图像被截断，所以我将“包含”传递给 v-image 以及与旋转木马容器匹配的最大高度。

现在的问题是一些更“横向”风格的图像位于旋转木马容器的顶部，我希望所有图像都对齐到中心，就像旋转木马默认将所有图像对齐到中心一样.我试图通过 css 访问 v-img，但将图像设置为在网格上居中对齐似乎没有任何作用。我知道我正在访问 img 元素，因为当我将 display:none 放在 css class 中时，它起作用了。

有没有办法对齐轮播中的图像？

<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 网格不工作。

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

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

Answer 1

解决方案：

我只是将图像包裹在另一个 div 中，该图像设置为 v-carousel-item 的 100% 高度。 div 设置为网格，然后 aligned/justified 图像。

然后图片本身的高度设置为自动。

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

在 v-carousel 组件内对齐图像

Aligning images inside a v-carousel component

css

alignment

vue.js

vuetify.js