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

【问题标题】：Stretch and fill image in Bootstrap carousel在 Bootstrap 轮播中拉伸和填充图像
【发布时间】：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" 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。

无论原始分辨率如何，我应该怎么做才能将图像填充到一定的高度和宽度？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案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 我建议您检查一下您对否决按钮的使用情况 - stackoverflow.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 view

Version 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" height="300" width="300" 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" height="300" width="300" />
<!--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;
}

【讨论】：