轮播中的图片不合适

时间:2019-03-07 21:43:16

标签: html css bootstrap-4

我正在使用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>

它看起来像这样:

它太放大了。

zoomed

原始图片如下: normal

有人可以帮助我解决他的问题吗?

1 个答案:

答案 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; 
}

希望有帮助。