html - carousel - 将 caroseul 设置为固定高度并防止图像向外拉伸(stretch)

Question

我目前在处理轮播中的图片时遇到问题。轮播中的图像不断在容器外爆裂。我也尝试过很多堆栈溢出解决方案，但似乎没有一个能解决我的问题。

我希望轮播图片的最大高度为 500 像素；并将所有图像放入容器中。不幸的是，在内部元素上设置最大高度会切断它们。我已经尝试将 img-fluid 添加到其中，但似乎仍然没有任何效果。

这是代码。

<div class="container" style="max-height:500px;">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="assets/img/shop.png">
            </div>
            <div class="item">
                <img src="assets/img/m1.jpg">
            </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div


<style type="text/css">
    .carousel{
        background: #000000;
        margin-top: 20px;
    }
    .carousel .item{
        min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
    }

    .bs-example{
        margin: 20px;
    }

    .carousel .item img {
        min-width: auto;
        margin: 0 auto;
    }

</style>

两张图片大小不一，

2355 x 975,1844 x 2048

Answer 1

我不明白你的问题，但我有点明白问题是什么。

对此有很多解决方案。

• 解决方案 - 1

  将容纳图像的容器设为 height:500px 并使用 photoshop或任何使图像高度为 500 像素的在线工具。

• 解决方案 - 2

  将容纳图像的容器设置为height:500px 并制作图像高度 100% 所以它适合。

• 解决方案 - 3

  使用对象适合属性。

.希望这会有所帮助。