bootstrap how to make a fixed height responsive?

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
}

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>

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>

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