Html 如何在carousel引导中通过高度将图像居中

你好，我是这个伟大社区的新手，也是一个非常不熟练的程序员
我有一个问题，我希望旋转木马中的图像按高度居中。
旋转木马中的图像越大，我希望将它们居中，以显示foto的最佳部分，而不仅仅是上部。
我的旋转木马：
我希望如何查看它（不透明部分是图像的其余部分）：
我希望我能解释清楚。
这是一些代码
HTML

---

对于

object fit:cover

要工作，您需要在图像上设置

宽度：100%

和

高度：100%

同时将

overflow:hidden

放在图像的父级上，它应该可以工作<如果图像未设置

宽度

和

高度

属性，则该属性将不起作用

---

如果您仅将

最大宽度

和

最大高度

设置为图像，则此操作将不起作用，因此请记住

我相信您希望根据图像高度裁剪图像

因此，对象匹配可能不是您想要的。这是基于您的问题的css技巧

您想将

img裁剪

添加到

光罩
坚强的面具
轻薄的面具

.carousel项目img{object fit:cover}

完成。

    <!--Carousel Wrapper-->
<div id="carousel-home" class="carousel slide carousel-fade" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-home" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-home" data-slide-to="1"></li>
        <li data-target="#carousel-home" data-slide-to="2"></li>
    </ol>
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <div class="view">
                <img class="d-block w-100 mx-auto" src="imgs/slider/1.png" alt="First slide">
            </div>
            <div class="carousel-caption">
                <h3>Light mask</h3>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100 mx-auto" src="imgs/slider/2.png" alt="Second slide">
            <div class="carousel-caption">
                <h3>Strong mask</h3>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100 mx-auto" src="imgs/slider/3.png" alt="Third slide">
            <div class="carousel-caption">
                <h3>Slight mask</h3>
            </div>
        </div>
    </div>
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

.carousel-inner 
{ 
width:100%; 
max-height:350px; 
}
.carousel-caption 
{
    text-align: center;
    bottom: 70%;
}