Twitter Bootstrap: Carousel: Vertically Center Image in Definded height Viewport

Question

I am attempting to find a way to verticially center an image inside of my viewport for the carousel. Currently the images are working fine and it is resizing the image to the size of the viewport on the width. But I want to use the center of the image and crop the top and bottom of the photo.

Here is the HTML:

<div class="carousel slide hero">
   <div class="carousel-inner">
       <div class="active item">
            <img src="img/hero/1.jpg" />
       </div>
       <div class="item">
           <img src="img/hero/2.jpg" />
       </div>
       <div class="item">
           <img src="img/hero/3.jpg" />
       </div>
    </div>
    <a class="carousel-control left" href=".hero" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href=".hero" data-slide="next">&rsaquo;</a>
</div><!-- hero -->

and the small bit of css:

.carousel-inner {
    height: 320px;
    overflow: hidden;
}

Any help is greatly appreciated. I want it so that if they upload any size photo it can be considered usable.

Solution 1

I have solved this problem by specifying the .item height and making the image in it absolutely positioned:

.item {
height: 300px;
}

.item img {
max-height: 100%;  
max-width: 100%; 
position: absolute;  
top: 0;  
bottom: 0;  
left: 0;  
right: 0;  
margin: auto;
}

This will make a carousel 300px height with images centered vertically and horizontally.

Solution 2

If you don't know the height of images, you can use next styles

#product-detail .carousel-inner{
    height: 500px;
}

#product-detail .carousel-inner>.active{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#product-detail .carousel-inner>.next,
#product-detail .carousel-inner>.prev{
    top: 50%;
    transform: translateY(-50%);
}

here, #product-detail is used as wrapper to override bootstrap styles.
also, don't forget to wendorize transform.

Solution 3

Use the following, this positions the image in the center of the carousel viewport and sets the height to 320px

.carousel-inner>.item>img {
    margin: 0 auto;
    height: 320px;
}

Hoped this helped you out

Solution 4

This Might be help you

Try Out this Plugin

https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

And take a look over here.

Twitter Bootstrap Vertical Thumbnail Carousel

View more solutions

Comments

[Peege151]

Thank you, this fixed the problem for me. Also, in order to make sure it wouldn't continue to scale past the point where it would be so small that white margins would come in, I added a min-width:'768px' to the wrapper. Hope this helps other people too

[xtian]

This worked perfectly! I don't understand the phrase "don't forget to wendorize transform" though oO

[xtian]

It works for images, but captions get hidden below the carousel viewport. How to pull them up into position?

[wasabigeek]

@xtian set vendor-prefixes I believe e.g. peter.sh/experiments/vendor-prefixed-css-property-overview

[wasabigeek]

@grigson is it expected that when images cycle, they will scroll diagonally to the bottom-left, then move upwards?

[xtian]

This trick doesn't work anymore on Bootstrap v3.3.2; any idea why?

[Thomas Gak-Deluen]

Lol he said vertically align

[gdvalderrama]

This only aligns the image horizontally

[Alisson Reinaldo Silva]

I tried this, this and also this, but none of them worked. But this solution works perfectly, thank you sir!