Offseting images vertically on carousel

Question

So I have been looking to the solution for the following issue:

The bootstrap carousel is capable of expanding an image to fit the with of the container. This is all fine and dandy. The issue arrive when you have images with different heights.

The carousel will expand the height of its container to fit the image, which can be fixed with:

.container.banner .carousel-inner {
    height:500px;
}

Now the issue arrives when i try to offset the image so you can see the middle instead of the top. What I mean by this is since all the images are going to be of different heights i would need to shift whats inside the <img> tag towards the top.

I have found some people some solutions that describe using a background image but for the sake of this post im looking to stay away of that posibility.

so tl;dr: How do i shift an image X amount vertically inside the carousel.

here is my code: HTML:

<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>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" 
            data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel"
            data-slide="next">&rsaquo;</a>
    </div>
</div>

Css

.container.banner .carousel-inner {
    height:500px;
}
.container.banner .carousel-inner img{
    /*something to move the image*/
    /*top:5px; This doesnt work dynamically, percentage doesnt react*/

}

EDIT:

Well if you do the following:

.container.banner .carousel-inner .item{
    position:relative;
    width:100%;
    bottom: 47%;
}
.container.banner .carousel-inner .item img{
    width:100%;
}

You get something like a solution but! depending on the image it might go over to much or to little. Ideally the image center has to be in the middle of the carousel. And here lies my current issue...

Edit 2: The Answer

So the following will manage to somewhat offset the image enough to appear centered vertically.

<script type="text/javascript">
$(document).ready(function () {
    $( ".container.banner .carousel-inner .item" ).each(function( index ) {

         $(this).css("margin-top",-(($(this).height())/4) + 'px');
    }
)});
</script>

Adding this to the end of the HTML will allow for object to be "centered" vertically on the carousel, independent of the height the images might have. Also don't forget to set the width of the <img> tag to 100% as per the original post.

and a final comment: Credit to @bleuscyther for the solution.

Answer 1

you can fix the maximum height of the image

.container.banner .carousel-inner .item img{

    max-height :500px

}

maybe after you will want to center the image if you have a fix width for the .carrousel-inner example :

.container.banner .carousel-inner {
 width :900px
}
.container.banner .carousel-inner .item img{
 max-width: 900px;
 margin: 0 auto;
}

Edit

if you really want the image to fit the Using your previous CSS + this :

img {
    position: absolute;
    top: 50%;
    left: 50%;

}

and a little jquery

at the bottom of the page :

<script>

$(document).ready(function () {
$( ".container.banner .carousel-inner .item img" ).each(function( index ) {

    X= $(this).width()
    Y= $(this).height()
    margin_left = -(X/2);
    margin_top = -(Y/2);

   $(this).css("margin-left",margin_left + 'px');
   $(this).css("margin-top",margin_top + 'px');
};

)};

</script>

you can compact the code if it works and you get the logic:

 $(this).css("margin-left",-(($(this).width())/2) + 'px');