Question

我目前对轮播上的图像有困难。轮播中的图像不断在容器外部破裂。我还尝试了许多堆栈溢出解决方案，但似乎都没有一个能解决我的问题。

我希望轮播图片的最大高度为500px；并将所有图像放入容器中。不幸的是，在内部项目上设置最大高度会切断它们。我尝试在其中添加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

请提供猫头鹰轮播javascript。您是否使用过div滑块的owl-carousel类。

Answer 2

我不明白您的问题，但是我有点明白问题所在了。

对此有很多解决方案。

解决方案-1

将用于保存图片的容器放置到height:500px上并使用photoshop 或任何在线工具将图片的高度设为500px。
解决方案-2

将保存图片的容器放置到height:500px上并制作图片 height 100%因此适合。
解决方案-3

使用对象适合属性。

。希望这会有所帮助。

轮播-将caroseul设置为固定高度，并防止图像向外拉伸

2 个答案: