Question

大家好我正在使用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。

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

Answer 1

您可以使用<img>，同时仍然隐藏object-fit元素用于搜索引擎优化和语义目的。单个img网址同时使用，因此没有额外加载，background-size is well supported（与<div class="item" style="background-image: url(http://placehold.it/400x400);"> <img src="http://placehold.it/400x400"/> </div>不同，其中lacks support在IE，Edge和Android＆lt; 4.4.4中）。

Fiddle Demo

HTML更改：

.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;
}

CSS更改：

{{1}}

Answer 2

你可以在css中放置高度并添加！important，因为bootstrap用auto和object-fit：cover覆盖你的高度;将像背景大小覆盖一样工作 a fiddle

.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

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

另请查看Bootstrap的.img-responsive类here。

<强>更新

在Bootstrap 4 Alpha和Beta

中已更改为.img-fluid

Answer 5

使图像占据容器大小的100％。使用高度：100％和宽度：100％。

然后通过将容器的值设置为所需的大小来限制大小。

.item{
  height:300px;
  width:350px;
}
.item img{
  width:100%;
  height:100%;
}

我希望这会有所帮助。

Answer 6

默认情况下，轮播将增长到适合父母的任何内容，在您的情况下，.col-md-6和.col-sm-6。如果您希望旋转木马为300x300，请将旋转木马类/ ID或任何尺寸设置为您想要的尺寸。

然后，bootstrap将height: auto;应用于轮播中的图像，这将覆盖您在HTML中指定的height属性。您可以通过以下两种方式解决这个问题 - 如果您希望保留height标记width（并且为了保持一致，style），请img标记为内联body { margin: 10px; } .carousel, .carousel img { width: 300px; } .carousel img { height: 300px!important; }在HTML中，或将高度应用于CSS文件中的轮播图像。

<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>

 Dim parser As new String() = matrix(i)(j).Split(New Char() {" "c})

Answer 7

使用“对象适合：封面”属性的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>

Codepen

Editor

Full view

Version of background .item

Answer 8

将此添加到文件的css中。这会限制图像的高度和宽度，从而对齐它。

.item img { max-height: 300px; max-width: 350px; }

Answer 9

如果你可以使用简单的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。

Answer 10

在每个图像属性中添加此类

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%;
}
```

Answer 11

您可以使用以下样式执行此操作：

.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

Answer 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

Answer 13

尝试从img标记中删除样式：

＆＃13;

<!--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"/>

＆＃13;

Answer 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轮播中拉伸和填充图像

14 个答案:

Codepen