我正在使用Bootstrap4。那里有一个带有图片的轮播。图像一直显示太大,并且像放大一样。Idk出了什么问题。
这是我的html代码:
lapply
css代码:
<div class="carousel-inner">
<div class="carousel-item active col-xs-12 col-sm-12">
<img src="/images/holz_5.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima.</p>
</div>
</div>
<div class="carousel-item col-xs-12 col-sm-12">
<img src="/images/holz_6.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima</p>
</div>
</div>
<div class="carousel-item col-xs-12 col-sm-12">
<img src="/images/holz_4.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima</p>
</div>
</div>
</div>
它看起来像这样:
它太放大了。
有人可以帮助我解决他的问题吗?
答案 0 :(得分:0)
我相信问题在这里:
.carousel-inner img {
position: absolute;
top: 0;
left: 0;
height: 32rem;
object-fit: cover!important;
display: block;
}
尝试像这样更改对象的适合度和高度:
.carousel-inner img {
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: contain !important;
display: block;
}
希望有帮助。