bootstrap how to make a fixed height responsive?

Question

How can I make a fixed height element responsive with bootstrap 3? For instance I set the carousal's height at 650px. But I can't make it responsive like the images do. Any idea?

css,

#article-carousel .carousel-inner{
    height:650px;
}

html,

<!-- Carousel items -->
<div class="carousel-inner">

   <div class="active item">
     <img src="style/image/10403889_707684359268375_7804458077651816095_o.jpg" class="img-responsive"/>
   </div>
....

Answer 1

You can use css3 object-fit for resizing your image http://jsfiddle.net/xcoq9xxg/

img {
    height: 650px;
    width: 100%;
    object-fit: cover; // here
}

It works for Chrome and Opera. Use polyfill library for others: https://github.com/schmidsi/jquery-object-fit or https://github.com/anselmh/object-fit .

---

Another way is to use css3 background-size http://jsfiddle.net/dizel3d/rwdspudv/

.image {
    height: 650px;
    background-position: center;
    background-size: cover;
}

It works in all modern browsers without javascript, but you need to use <div> instead of <img> :

<div class="image" style="background-image: url('my-image.jpg')"></div>

Answer 2

i had the same problem with the responsive fixed height. I use vh instead of px. In my case it works like a charm

img {
    height: 85vh;
    width: 100%;
    object-fit: cover; // here
}

Answer 3

Try :

.carousel-inner > item { position: relative; overflow:hidden; }
.carousel-inner > item > .img-responsive { position: absolute; top:0; bottom:0; }

or, I think thats better to do it with js ( with boostrap we'll use jquery ) :

...
function init_carousel(){
    H = +($( window ).height()); // or $('.carousel-inner') as you want ...
    $('.img-responsive').css('height',H+'px');
}
init_carousel();
...

In this case, add div with the background image into, and your css must be :

.carousel-inner > item { position: relative; overflow:hidden;  }
.carousel-inner > item > .img-responsive-fix { position: absolute; top:0; bottom:0; left:0; right:0; text-align:center; padding:0; margin:0; }
.carousel-inner > item > .img-responsive { witdh:auto; }

Answer 4

Try below this worked just fine for me

 <style> /* Make the image fully responsive */ .carousel-inner img { width: 500px; height: 350px; } .carousel { height: 350px; width: 500px } </style>

Answer 5

          function Screensize() {
        try {
            var height = ((screen.height * 80) / 100);
            document.getElementById('Mapbox').setAttribute("style", "display:block;height:" + height + "px; overflow:auto;");
        } 
        catch (ex)
        {  alert(ex); }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
    }

Answer 6

you will need to restyle carousel-control class with media query here is just an example code to add

 @media (max-width: 800px) {
    .carousel-control{
      height:350px;
    }
 }