Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stretch and fill image in Bootstrap carousel

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?

like image 845
Mike Ross Avatar asked Nov 13 '15 03:11

Mike Ross


People also ask

How do you fit a picture in Carousel bootstrap?

1 method is to use a div with a specified size, use css to set the image as a background image for the div and set background-size to fit, contain or cover. 2 A better approach is to use an image manipulation program like photoshop, i personally use an online application called https://www.photopea.com.

How do I put full picture on carousel?

Original answer (Bootstrap 3) Make sure the img inside the carousel item is set to height and width 100%. You also have to make sure the carousel and any of the . item containers (html,body) are 100%...

How do I fit a carousel screen?

Add this class to your image tag inside carousel-inner div. Show activity on this post. It may be because of the media queries of the bootstrap class trying to set the max-width to a smaller size. You can apply a custom class to the carousel and override the max-width to fit the screen.

How do I make bootstrap 4 carousel full width?

To make it full-width we don't use any Bootstrap “container” or “row”, just the carousel which I have placed inside a “div” tag (class “top-content”) with a 100% width. The images I've used are 1920 pixels wide so they should cover pretty much every type of device.


Video Answer


3 Answers

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;
}
like image 114
Aref Ben Lazrek Avatar answered Oct 25 '22 19:10

Aref Ben Lazrek


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.

like image 26
Mathias Asberg Avatar answered Oct 25 '22 17:10

Mathias Asberg


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;
}
like image 12
Matija Mrkaic Avatar answered Oct 25 '22 19:10

Matija Mrkaic