Trying to get Bootstrap carousel to resize proportionately - css

Question

I'm try to get a Bootstrap 3 carousel to shrink proportionately as the screen size shrinks - i.e. I want it to stay the same shape as it get's smaller. Out of the box it just squishes down (get's narrower, but not shorter). I got the image to do what I want, but the background of the carousel doesn't follow. I've tried all sorts of things, but can't figure it out. Any hint would be appreciated. Thanks!
Unfortunately I'm not able to post a pic here yet. Basically when it's sized down the grey background of the carousel sticks out from under the image.
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
max-height: 500;
max-width: 753px;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
margin-top: 50px;
}
/* Since positioning the image, we need to help out the caption */
/*.carousel-caption {
z-index: 10;
}*/
/* Declare heights because of positioning of img element */
.carousel .item {
width: 100%;
height: 500px;
min-height: 100px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
width: auto;
height: auto;
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="img/htff-1.jpg" alt="First slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
</div> -->
</div>
</div>
<div class="item">
<img class="second-slide" src="img/lostDivision-025.JPG" alt="Second slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div> -->
</div>
</div>
<div class="item">
<img class="third-slide" src="img/sballard_01.jpg" alt="Third slide">
<div class="container">
<!-- <div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div> -->
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->

Answer 1

Are you loading .js files in correct sequence ?
I loaded them in this sequence .... and your code is running perfectly.
bootstrap.min.css
jquery-2.1.3.min.js
bootstrap.min.js

Answer 2

Try adding height:100% to your last selector. This will make your container retain its shape while still resizing when the browser size changes.