垂直对齐与自动调整大小图像，以适应旋转木马

Question

我有旋转木马，我无法正确显示图像。如何在旋转木马的底部放置图像？

这是我的移动视图，效果很好，无需缩放：

但是当我选择全屏视图时，图像会扩展到顶部：

我对此感兴趣：

这是我的代码：

HTML：

<div class="container-fluid">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000">
        <!--Indicators-->
        <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <!--Photos-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../sources/img/carousel/01.jpg">
            </div>
            <div class="item">
                <img src="../sources/img/carousel/02.jpg">
            </div>
            <div class="item">
                <img src="../sources/img/carousel/03.jpg">
            </div>
            <div class="item">
                <img src="../sources/img/carousel/04.jpg">
            </div>
            <!--Carousel controls-->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div> <!--Container carousel-->

CSS：

.carousel-inner > .item {
  max-height: 700px;
}
.carousel-inner > .item img{
  width: 100%;
}

谢谢

Answer 1

添加以下CSS可以解决问题。

.carousel-inner > .item {
    height: 25vh;
}

.carousel-inner .item img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

您可能需要使用媒体查询更改height .item。