Center Bootstrap Carousel images when window is resized - html

Question

I have seen a lot of similar questions, but the solutions did not apply.
I am trying to make a Bootstrap carousel such that when the window is resized, the image remains centered while also maintaining the required image height and minimum 100% width properties.
This is a little difficult to explain, but you can see a similar concept on http://www.lyft.com
I have replicated a similar issue on codepen which you can see, that if you shrink the window down to the size of a mobile device the image remains fixed and ultimately you're looking at the top left corner of the image (usually clouds or some unrecognizable blur).
I'm trying to have this image move left and remain centered as the horizontal view shrinks so that the image remains relevant.
My additional carousel styles:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
overflow: hidden;
}
/* 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 {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: relative;
top: 0;
left: 0;
min-width: 100%;
max-width: none;
height: auto;
}
.carousel-inner img{
margin: auto;
}
#mycarousel{
position: relative;
top: 0;
}
And the simple carousel:
<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>
<li data-target="#mycarousel" data-slide-to="3"></li>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
</div>
</div>
</div>

Answer 1

I made a solution based on the lyft site you linked in your post. I turned your img into div and used a background image then styled appropriately.
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=397');" data-color="lightblue" alt="First Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=689');" data-color="firebrick" alt="Second Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=675');" data-color="violet" alt="Third Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=658');" data-color="lightgreen" alt="Fourth Image"></div>
</div>
<div class="item">
<div class="item-child" style="background-image: url('https://unsplash.it/2000/1250?image=638');" data-color="tomato" alt="Fifth Image"></div>
</div>
Then removed this .carousel-inner > .item > img and added this CSS:
.carousel-inner .item .item-child {
background-position: top center;
background-size: cover;
position: absolute;
bottom:0;
top: 0;
left: 0;
right:0;
width: 100%;
height: auto;
}
You can see the js.fiddle here if you want to play around with it. Hope that helps.

Answer 2

There you go, Easiest fix
instead of min-width use width on images
.carousel-inner > .item > img {
position: relative;
top: 0;
left: 0;
width: 100%;
max-width: none;
height: auto;
}
also throw in a height adjustment for carousel like this
.carousel .item {
height: auto;
background-color: #777;
}
http://codepen.io/Rohithzr/pen/WwEpgp?editors=1100