在Bootstrap轮播中拉伸和填充图像

Question

嗨,伙计们我正在使用bootstrapcarousal并且图像高度和宽度有问题.即使我在img属性中定义它仍然显示为原始分辨率,以下是我正在使用的代码

<div class="col-md-6 col-sm-6">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </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>
</div>

这是演示.

无论原始分辨率如何,我该怎么做才能以一定的高度和宽度填充图像.

Answer 1

您可以使用background-size: cover,同时仍然具有<img>用于SEO和语义目的的隐藏元素.单IMG网址使用两次,所以没有额外的负载,以及背景尺寸很好的支持(不像object-fit它缺乏支持在IE中,边缘和Android <4.4.4).

小提琴演示

HTML更改:

<div class="item" style="background-image: url(http://placehold.it/400x400);">
  <img src="http://placehold.it/400x400"/>
</div>

CSS更改:

.carousel {
  /* any dimensions are fine, it can be responsive with max-width */
  width: 300px;
  height: 350px;
}

.carousel-inner {
  /* make sure your .items will get correct height */
  height: 100%;
}

.item {
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
}

.item img {
  visibility: hidden;
}

Answer 2

你可以在css中放置高度并添加!important,因为bootstrap用auto和object-fit:cover覆盖你的高度; 将像背景大小覆盖小提琴一样工作

.carousel{
  width:300px;
}
.item img{
  object-fit:cover;
  height:300px !important;
  width:350px;
}

Answer 3

你在占位符中有宽度应该无关紧要，把它放在你的 css 中，它应该可以工作，如果它有效，你可以尝试删除 !important。

 .carousel img {
        width:100% !important;
        min-width:100 !important;
        height: auto;
    }

bootstrap 中的 .img-responsive 只会将宽度设置为 100%，因此在图像原始比例小于轮播宽度的情况下，它不会填充它。

Answer 4

您在 URL 中定义占位符的大小，而不是在元素的 HTML 属性中定义。

另请在此处查看 Bootstrap 的 .img-responsive 类。

更新

.img-fluid这在 Bootstrap 4 Alpha 和 Beta 中已更改为