I've been trying to find a solution for a particular issue I'm facing:
The Bootstrap carousel can adjust an image to fit the width of its container, which works well. The problem arises when dealing with images of varying heights.
The carousel will adjust the height of the container to fit the image, but this can be rectified by adding:
.container.banner .carousel-inner {
height:500px;
}
The real challenge comes in when attempting to vertically offset the image within the carousel for better alignment. I don't want to resort to using background images, so I'm exploring other options.
In short, how do I shift an image vertically inside the carousel by a certain amount?
Here is my code snippet:
<div class="container banner">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="img/carousel/Carousel.jpg" alt="">
</div>
<div class="item">
<img src="img/carousel/Carousel (2).jpg" alt="">
</div>
<div class="item">
<img src="img/carousel/Carousel (3).jpg" alt="">
</div>
</div>
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
</div>
CSS:
.container.banner .carousel-inner {
height: 500px;
}
.container.banner .carousel-inner img{
/*some code to move the image*/
}
Edit:
If you use the following CSS:
.container.banner .carousel-inner .item{
position:relative;
width:100%;
bottom: 47%;
}
.container.banner .carousel-inner .item img{
width:100%;
}
You'll get a partially centered result, but it may not work perfectly for all images. Ideally, the center point of the image should align with the middle of the carousel. This is where I'm currently stuck...
Edit 2: The Solution
To somewhat vertically center the image, add the following JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$( ".container.banner .carousel-inner .item" ).each(function( index ) {
$(this).css("margin-top",-(($(this).height())/4) + 'px');
}
)});
</script>
Appending this to your HTML will help "center" objects vertically within the carousel, irrespective of the images' heights. Also, remember to set the <img> tag's width to 100% as mentioned earlier.
Lastly, credit goes to @bleuscyther for providing this solution.