Carousel Images Height Shrinking

Question

I've got a carousel on my index page, but I've noticed that if I shrink my browser, the image doesn't stay within the whole carousel.

If you don't understand what I mean, here's an image of the carousel after shrinking the browser:

As you can see, the width of the image responds to the browser window size, but the height doesn't, leaving that big white space below the image.

Here is my current code:

<div class='carousel slide' id='hero' style='position: absolute;'>
<div class='carousel-inner' style='z-index: -1'>
<div class='active item'>
    <img src='images/index/img1.jpg'>
</div>
<div class='item'>
    <img src='images/index/img2.jpg'>
</div>
<div class='item'>
    <img src='images/index/img3.jpg'>
</div>
<div class='item'>
    <img src='images/index/img4.jpg'>
</div>
<div class='item'>
    <img src='images/index/img5.jpg'>
</div>
<div class='item'>
    <img src='images/index/img6.jpg'>
</div>
</div>
</div>

How do I make the images within the carousel respond to smaller browser windows?

Answer 1

So I've fixed it myself after some more research.

In the CSS, I had this:

.carousel-inner {
    overflow:hidden;
    width:100%;
    position:relative;
}

I fixed it by putting the dimensions of the images instead of the 100% width, so:

.carousel-inner {
    overflow:hidden;
    width:1920px;
    height:1200px;
    position:relative;
}