Bootstrap Carousel Pushing and Pulling Content - css

Question

I am having some issues with my bootstrap carousel. The images that are currently in it are different sizes and switching between images pushes and pulls content of the page. I want a static height and for the pictures to fill the static height while maintaining aspect ratio. Where have I gone wrong here?
Here is the code from the Carousel:
<header id="main_carousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#main_carousel" data-slide-to="0" class="active"></li>
<li data-target="#main_carousel" data-slide-to="1" class=""></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="center-block fill" style="background-color:#6A6A6A" src="sample_house_one.jpg" height="inherit" alt="First slide" >
<div class="carousel-caption">
<h3>Next Esate Sale</h3>
<p>July 8th at 9:00 AM</p>
</div>
</div>
<div class="item">
<img class="center-block fill" style="background-color:#6A6A6A" src="Sample_house_two.jpg" height="inherit" alt="Second slide">
<div class="carousel-caption">
<h3>Congrats to the new owners</h3>
<p>Winning bid olny $65,000!!!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#main_carousel" 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="#main_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</header>
Here is the css I'm using with the carousel everything else is standard Bootstrap theme and css:
html,
body {
height: 360px;
}
.carousel {
height: 360px;
}
.carousel-inner > .item img,
.carousel-inner > .item > a > img {
min-height:500px;
max-width: 100%;
}
.item,
.active,
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
footer {
margin: 50px 0;
}

Answer 1

Put a max-height: 500px on your img tag so that way it can't shrink or grow with different picture sizes.
Or better, get rid of the min-height and just define height. If your pictures are cropping oddly, you might want to either use a background-image div or crop them to the same size and aspect ratio in an image editing program for the simplest solultion. Since you're using a carousel, cropping the images ahead of time might be the easiest solution.
You could also just allow the div to overflow and hide scroll bars as well, and use flexbox to position the image in the middle with align-items: center to crop the top and bottom evenly.