I have encountered several questions similar to mine, but none of the solutions provided worked for me.
My objective is to create a Bootstrap carousel that will keep the image centered when the window size is adjusted, while also maintaining specific image height and minimum 100% width properties.
To better illustrate what I am trying to achieve, you can visit a website like
I have replicated a similar issue on codepen. If you resize the window to the size of a mobile device, the image remains fixed and only shows the top left corner of the image (often clouds or an indistinguishable blur).
The goal is to have the image move to the left and stay centered as the window shrinks horizontally so that the content of the image remains visible.
Here are some additional styles added to the carousel:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
overflow: hidden;
}
/* Adjusting caption positioning */
.carousel-caption {
z-index: 10;
}
/* Set heights for img element positioning */
.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 here is the basic carousel structure:
<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>