【发布时间】：2018-12-05 23:58:42
【问题描述】：
我的问题
我正在使用与引导网站完全相同的代码进行轮播。但是每当加载下一张图片时，整个 div 都会改变高度和宽度。我已经根据堆栈溢出论坛的一些建议制作了fixed height, 100% width, overflow:hidden 等。但它不起作用。
我的代码
.carousel-item img {
height: 100% !important;
}
.carousel-item {
height: 500px;
overflow: hidden;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://intrepidmorocco.com/wp-content/uploads/2016/12/Desert-Tours-marrakech.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://moroccotraveland.com/wp-content/uploads/2017/07/desert-morocco-sahara.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>有人知道如何解决这个问题吗？
【问题讨论】：
-
图像是否具有相同的高度，您修复了哪个元素的高度
-
具有不同高度和宽度的图像。我将所有图像的高度和宽度固定为所有图像的 100%。但它不起作用
-
撤消，让图像有
width:100%;，让高度自动，给.carousel-inner{height:yourheight px; overflow:hidden} -
@M0ns1f：试过了。但不工作
标签： html css twitter-bootstrap-3 bootstrap-4