时间戳

首页 > 解决方案 > Bootstrap - 基于 Div 容器的图像居中并自动调整宽度和高度大小的轮播

html - Bootstrap - 基于 Div 容器的图像居中并自动调整宽度和高度大小的轮播

问题描述

我正在尝试使用 Bootstrap 实现轮播，其中图像居中并自动调整大小。例如，在JSFiddle中，您可以看到第一个图像（垂直图像）拉伸了整个 div，而第三个图像仍然在顶部。我想重现 Facebook 或 Twitter 轮播的行为，其中图像位于中心并根据包含它们的 Div 调整大小。你能帮助我吗？

<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ul class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active">One</li>
    <li data-target="#myCarousel" data-slide-to="1">Two</li>
    <li data-target="#myCarousel" data-slide-to="2">Three</li>
</ul>

<!-- Inner -->
<div class="carousel-inner">
    <div class="item active">
        <img src="https://scontent.ffco3-1.fna.fbcdn.net/v/t1.6435-9/171147625_1208393786271117_8898528403586821491_n.jpg?_nc_cat=111&ccb=1-3&_nc_sid=730e14&_nc_ohc=dDKFCCAYB-oAX_m2xtu&_nc_ht=scontent.ffco3-1.fna&oh=aa418a1e5facad55e6e4781237602778&oe=609A1892" 
             class="img-responsive" />
        <div class="container">
            <div class="carousel-caption">
                <h1>Photo 1 - Vertical</h1>
                <p>Hello!</p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="https://scontent.ffco3-1.fna.fbcdn.net/v/t1.6435-9/173646266_1210629629380866_4626783539462302067_n.jpg?_nc_cat=111&ccb=1-3&_nc_sid=730e14&_nc_ohc=QelU_ZVtqAcAX9wHI-l&_nc_ht=scontent.ffco3-1.fna&oh=272c997f1febf514a031aefe9cb712cb&oe=609BBCA2" 
             class="img-responsive" />
        <div class="container">
            <div class="carousel-caption">
                <h1>Photo 2 - Square</h1>
                <p>Hello again!</p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="https://scontent.ffco3-1.fna.fbcdn.net/v/t1.6435-9/167432599_1203101340133695_8518788973824059736_n.png?_nc_cat=107&ccb=1-3&_nc_sid=730e14&_nc_ohc=CItpIApuYmgAX_zHj8t&_nc_ht=scontent.ffco3-1.fna&oh=83145492bb38c8c2148df70086382459&oe=609A928F" 
             class="img-responsive" />
        <div class="container">
            <div class="carousel-caption">
                <h1>Photo 3 - Horizontal</h1>
                <p>Hello again and again!</p>
            </div>
        </div>
    </div>
</div>

<!-- Controls --> 
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
</a> 
</div>

CSS

.carousel-indicators > li, .carousel-indicators > li.active {
    width: 100px;
    height: 25px;
    border-radius: 0;
    border: solid 1px grey;
    background: lightgrey;
    text-indent: 0;
}
.carousel-indicators > li.active {
    background: white;
}

#myCarousel {
  width: 500px;
  height: 500px;
}

标签： htmlcssbootstrap-4

解决方案

添加这个

$('#myCarousel').owlCarousel({
    autoHeight:true
});

删除 CSS 上的高度

#myCarousel {
  width: 400px;
  /*height: 400px;*/ /*remove This*/
}

更新代码

#myCarousel .img-responsive{
  margin:0 auto;
  max-height:400px;
}

https://jsfiddle.net/lalji1051/qnrzuhm2/

更新：- https://jsfiddle.net/lalji1051/xmy46z3L/1/

推荐阅读