在Bootstrap旋转木马中拉伸和填充图像
我正在使用bootstrap carousal，图像的高度和宽度有一些问题。即使我在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>下面是其中的demo。
在不考虑原始分辨率的情况下，如何以一定的高度和宽度填充图像？
回答 11
Stack Overflow用户
发布于 2017-02-21 00:43:18
你可以使用background-size: cover，同时仍然有隐藏的<img>元素用于搜索引擎优化和语义目的。两次都使用了一个img url，所以没有额外的加载和background-size is well supported (不像IE，Edge和Android中的object-fit lacks support < 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;
}Stack Overflow用户
发布于 2017-02-19 06:42:40
您可以在css中放置高度并添加！重要信息，因为bootstrap将使用auto覆盖您的高度，并且object-fit: cover；将像背景大小cover a fiddle一样工作
.carousel{
width:300px;
}
.item img{
object-fit:cover;
height:300px !important;
width:350px;
}Stack Overflow用户
发布于 2015-11-13 11:20:53
你在占位符中有宽度应该无关紧要，把这个放在你的css中，它应该可以工作，如果它工作，你可以尝试删除！重要。
.carousel img {
width:100% !important;
min-width:100 !important;
height: auto;
}.img-responsive in bootstrap只会将宽度设置为100%，因此在图像原始比例小于旋转木马宽度的情况下，它不会填充它。
https://stackoverflow.com/questions/33685259
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号