在 Bootstrap 轮播中拉伸和填充图像
Posted
技术标签:
【中文标题】在 Bootstrap 轮播中拉伸和填充图像【英文标题】：Stretch and fill image in Bootstrap carousel 【发布时间】：2016-02-14 14:13:49 【问题描述】：我正在使用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" />
</div>
<div class="item">
<img src="http://placehold.it/350x350/aaa&text=Item 3" />
</div>
<div class="item">
<img src="http://placehold.it/350x350/aaa&text=Item 3" />
</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。
无论原始分辨率如何，我应该怎么做才能将图像填充到一定的高度和宽度？
【问题讨论】：
【参考方案1】：您可以使用background-size: cover，同时仍然隐藏<img> 元素用于搜索引擎优化和语义目的。两次都使用了单个 img url，因此没有额外的加载，并且 background-size is well supported （不像object-fit lacks support 在 IE、Edge 和 android
Fiddle Demo
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;
【讨论】：
你能指定如何让它响应你的回复吗？ @xavier 这是显示图像的响应式方式（最终使用contain 而不是cover）。整个轮播的响应性不是问题的一部分，但已经暗示您可以使用max-width 使其适应宽度。【参考方案2】：
您可以在 CSS 中放置 height 并添加 !important 因为 bootstrap 使用 auto 和 object-fit:cover;将像背景尺寸封面一样工作 a fiddle
.carousel
width:300px;
.item img
object-fit:cover;
height:300px !important;
width:350px;
【讨论】：
【参考方案3】：你在占位符中有宽度应该没关系，把它放在你的css中，它应该可以工作，如果它工作你可以尝试删除！important。
.carousel img
width:100% !important;
min-width:100 !important;
height: auto;
bootstrap 中的.img-responsive 只会将宽度设置为100%，因此如果图像原始比例小于轮播宽度，则不会填充。
【讨论】：
我试过了，但问题是它会使用图像本身的实际宽度，我不希望这样。我希望轮播的高度和宽度为 300x350，无论图像的高度或宽度是多少，但只填写该轮播【参考方案4】：让您的图片占据容器大小的 100%。 使用高度：100% 和宽度：100%。
然后通过将容器的值设置为所需大小来限制大小。
.item
height:300px;
width:350px;
.item img
width:100%;
height:100%;
我希望这会有所帮助。
【讨论】：
【参考方案5】：默认情况下，轮播将增长以适应父级的任何内容，在您的情况下为.col-md-6 和.col-sm-6。如果您希望轮播为 300x300，请将轮播类/ID 设置为您想要的尺寸。
然后，引导程序将height: auto; 应用于轮播中的图像，这将覆盖您在 HTML 中指定的height 属性。有两种方法可以解决这个问题 - 如果要将其保留在 HTML 中，要么将 height（为了一致性起见，width）内联 style 在 img 标签上，或者应用高度在 CSS 文件中轮播图片。
body
margin: 10px;
.carousel, .carousel img
width: 300px;
.carousel img
height: 300px!important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<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/400x400">
</div>
<div class="item">
<img src="http://placehold.it/350x450">
</div>
<div class="item">
<img src="http://placehold.it/350x350">
</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>【讨论】：
这将轮播压缩为浏览器窗口左边缘的细列。它可以在那个薄窗口中工作，但是... 但只有当我设置width: auto;和height:auto;时它才有效
@mLstudent33 我建议您检查一下您对否决按钮的使用情况 - ***.com/help/privileges/vote-down。答案是对原始问题的回答，不应低估答案，因为它不适用于您的特定用例。【参考方案6】：
您在 URL 中定义占位符的大小，而不是在元素的 HTML 属性中。
还可以查看 Bootstrap 的 .img 响应类 here。
更新
这在 Bootstrap 4 Alpha 和 Beta 中已更改为 .img-fluid
【讨论】：
我认为响应式图像和定义高度和宽度不能一起工作。对【参考方案7】：使用“object-fit:cover”属性的img标签
.carousel
height: 300px;
.carousel-inner
height: 100%;
.item
width: 100%;
height: 100%;
.item img
object-fit: cover;
/*
object-fit: fill;
object-fit: none;
object-fit: contain;
object-fit: scale-down;
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" >
<img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" />
</div>
<div class="item" >
<img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" />
</div>
<div class="item" >
<img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>代码笔
Editor Full viewVersion of background .item
【讨论】：
【参考方案8】：将此添加到文件的 css 中。这将限制图像的高度和宽度，从而对齐它。
.item img
max-height: 300px;
max-width: 350px;
【讨论】：
【参考方案9】：-
在每个图像属性中添加此类
class="img-responsive center-block"
例如：
<img src="http://placehold.it/350x350/aaa&text=Item 3" class="img-responsive center-block" />
添加此样式
.active img
width: 100%;
【讨论】：
【参考方案10】：您可以使用以下样式来做到这一点：
.carousel-inner .item
width: 600px; /* Any width you want */
height: 500px; /* Any width you want */
.carousel-inner .item img
min-width: 100%;
min-height: 100%;
通过将min-* 设置为图像属性，我们确保我们至少拥有100% 和width 和height。
更新JSFiddle
【讨论】：
【参考方案11】：如果你可以使用简单的 javascript，这里是更新的小提琴 https://jsfiddle.net/a1x1dnaa/2/
我所做的是，使用图像作为背景并删除了<img> 标签。
jQuery(function()
var items = $('.item');
items.each(function()
var item = $(this);
img = item.find("img");
img.each(function()
var thisImg = $(this);
url = thisImg.attr('src');
thisImg.parent().attr('style', 'background-image:url('+url+')');
thisImg.remove();
);
);
);
那么你可以使用一些样式来让图片填充div
.item
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
height: 200px; //you can use the height as you need
这应该适合你。
如果你不想使用javaScript，你可以简单地使用图像作为内联样式
<div class="item" style="background-image: url(http://placehold.it/400x400)"></div>
并使用与上述相同的 CSS。
【讨论】：
【参考方案12】：.item img
min-width: 300px;
min-height: 300px;
overflow: hidden;
.item
width: 300px;
height: 300px;
overflow: hidden;
你试试这个 css 和 html 的小变化。我使用不同的图像 src 以获得更好的清晰度。
here is updated fiddle
【讨论】：
【参考方案13】：尝试从img 标记中删除样式：
<!--from-->
<img src="http://placehold.it/350x350/aaa&text=Item 3" />
<!--to-->
<img src="http://placehold.it/350x350/aaa&text=Item 3"/>【讨论】：
【参考方案14】：我遇到了同样的问题。
对我有用的不是使用img，而是使用div 和background-image 用于css
HTML：
<div class="carousel-inner">
<div class="item active">
<div class="carousel-img"></div>
</div>
</div>
CSS：
.carousel-inner, .item
height: 100%;
.carousel-img
background-image: url('http://placehold.it/400x400');
width: 100%;
height:100%;
background-position:center;
background-size:cover;
【讨论】：
以上是关于在 Bootstrap 轮播中拉伸和填充图像的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap 获得轮播中的索引 getActiveIndex