我想缩短这个旋转木马中图像的宽度,而不是实际的红色框。我该怎么做呢?我无计可施了。我在这个论坛上尝试了所有的解决方案,它不会像我在图片中展示的那样缩小它。
<div class="container box">
<div class="row">
<!-- carousel -->
<div class="col-xs-8">
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img
src=""
alt="..." />
</div>
<div class="item">
<img src="" alt="..." />
</div>
<div class="item">
<img src="" alt="..." />
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic"
role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#carousel-example-generic"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-xs-4"></div>
</div>
</div>
发布于 2018-09-29 02:12:18
尝试:
.carousel-inner .item img {
width: 100%; /* or width: 100% !important; */
}
发布于 2018-09-29 02:18:52
试试这个:
.carousel-inner > .item > img {
width:100%; /* Or try to use important */
height:auto;
}
另一种方法是:
.carousel {
width:100%; /* Or try to use important */
height:auto;
}
如果不能工作,请告诉我,这样我就可以帮助你了
发布于 2018-09-29 02:40:59
您可以使用以下方法在Bootstrap Carousel中调整图像大小:
.carousel-inner .item img {
height: 100%;
width: 100% !important;
}
https://stackoverflow.com/questions/52560415
复制相似问题