Stretch and fill image in Bootstrap carousel

问题:

Hi guys i am using bootstrap carousal and having some problem with image height and width. Even though i define it in the img attribute it still displays as original resolution,following is the code i am using

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

Here is demo of that.

What should i do to fill the image in a certain height and width regardless of its original resolution.

回答1:

You can use background-size: cover, while still having hidden <img> element for SEO and semantic purposes. Single img url is used both times, so there's no additional loading, and background-size is well supported (unlike object-fit which lacks support in IE, Edge and Android < 4.4.4).

Fiddle Demo

HTML change:

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

CSS change:

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

回答2:

You can place height in css and add !important because bootstrap is overriding your height with auto , and object-fit:cover; will work like background size cover a fiddle

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

回答3:

That you have width in placeholder should not matter, put this in your css and it should work, If it works you can try remove !important.

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

.img-responsive in bootstrap will just set the width to 100%, So in the case that the image original proportions are less than carousel width it will not fill it out.

回答4:

Make your image take up 100% of the container size. using height:100% and width:100%.

Then restrict the size by setting values of the container to desired size.

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

I hope this helps.

回答5:

The carousel will grow to fit whatever the parent is by default, which in your case is .col-md-6 and .col-sm-6. If you want the carousel to be 300x300, style the carousel class/id or whatever to be the dimensions you want.

Then after that, bootstrap applies height: auto; to images in the carousel, which will override the height attribute you've specified in the HTML. 2 ways you can address that - either make the height (and for consistency sake, width, too) an inline style on the img tag if you want to keep it in the HTML, or apply the height to carousel images in your CSS file.

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>

回答6:

You're defining the size of your placeholders in the URL, not in the HTML attributes for the elements.

Also check out Bootstrap's .img-responsive class here.

Update

This has changed to .img-fluid in Bootstrap 4 Alpha and Beta

回答7:

Add this to the css of the file. This would restrict the height and width of the image and hence align it.

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

回答8:

1. Add this class in every image attribute

class="img-responsive center-block"

For example:

<img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" class="img-responsive center-block" />

2. Add this style

   .active img{
     width: 100%;
   }
   

回答9:

You can do that with the following styles:

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

By setting min-* to the image attributes, we're making sure we have at least 100% of both width and height.

Updated JSFiddle

回答10:

if it's okay for you to use simple javaScript, here is the updated fiddle https://jsfiddle.net/a1x1dnaa/2/

what i have done is, used the image as background and removed the <img> tag.

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();
    });
  });
});

then you can use some styles to make the image fill the 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 
}

this should work for you.

if you don't want to use javaScript, you can simply use the image as inline-style

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

and use the same CSS as above.

回答11:

.item img{
min-width: 300px;
min-height: 300px;
overflow: hidden;}
.item{
width: 300px;
height: 300px;
overflow: hidden;
}

you try this css and little change in html. i used different image src for better clearification.

here is updated fiddle

回答12:

Try removing the styling from the img tag:

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

I faced the same problem. What worked for me is instead of using img, I used div and background-image for 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;
}