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.

Please pick a valid answer if any of them helped you out – gdvalderrama May 06 '16 at 08:52 — gdvalderrama, May 06 '16 at 08:52

score 20 · Answer 1 · answered Feb 26 '15 at 23:38

20

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.

answered Feb 26 '15 at 23:38

Naragot

201
2
3

I tried [this](https://stackoverflow.com/questions/32509980/vertically-align-image-inside-a-bootstrap-carousel?rq=1), [this](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) and also [this](https://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working), but none of them worked. But this solution works perfectly, thank you sir! – Alisson Reinaldo Silva Aug 08 '18 at 04:35

score 6 · Answer 2 · answered Mar 19 '14 at 12:31

6

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.

answered Mar 19 '14 at 12:31

grigson

3,458
29
20

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 – Peege151 Oct 07 '14 at 04:58
This worked perfectly! I don't understand the phrase "don't forget to wendorize transform" though oO – xtian Oct 13 '14 at 10:38
It works for images, but captions get hidden below the carousel viewport. How to pull them up into position? – xtian Oct 13 '14 at 11:52
@xtian set vendor-prefixes I believe e.g. http://peter.sh/experiments/vendor-prefixed-css-property-overview/ – wasabigeek Dec 30 '14 at 15:48
@grigson is it expected that when images cycle, they will scroll diagonally to the bottom-left, then move upwards? – wasabigeek Dec 30 '14 at 15:49
1

This trick doesn't work anymore on Bootstrap v3.3.2; any idea why? – xtian Jan 25 '15 at 17:44

YorickH · Answer 3 · 2014-05-20T13:34:25.867

1

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

edited May 20 '14 at 13:34

answered Mar 11 '13 at 08:13

YorickH

391
2
12

2

Lol he said vertically align – Thomas Gak-Deluen Apr 30 '15 at 22:54
This only aligns the image horizontally – gdvalderrama May 06 '16 at 08:50

score 1 · Answer 4 · edited May 23 '17 at 12:02

1

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

edited May 23 '17 at 12:02

Community

1
1

answered Nov 19 '13 at 09:06

Shivam Pandya

1,061
3
29
64

score 0 · Answer 5 · answered Jan 10 '14 at 01:10

I added just a little bit to YorickH answer

.carousel-inner>.item>img {
margin: 0 auto;
height: 600px;
width: 100%;
}

This makes sure tje images stretch to the end of the screen (or your container), and increases the height a little so the images don't look so stretched and squished.

Martin Omacht · Answer 6 · 2015-09-24T14:59:22.250

I wanted to center images in carousel either

grigson's answer worked great on firefox, but did not work on Chrome. So after a lot of struggling I came up with this solution:

Put the images as a background of div.item, because that way you can easily position them without disturbing the layout:

.carousel-inner .item {
    width: 100%; /* Your width */
    height: 500px; /* Your height */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* This also makes sure it fills the whole div */
}

/* add the images to divs */
div.item:nth-of-type(1) {
    background-image: url("../img/carousel-photos/1.jpg");
}

div.item:nth-of-type(2) {
    background-image: url("../img/carousel-photos/2.jpg");
}

div.item:nth-of-type(3) {
    background-image: url("../img/carousel-photos/3.jpg");
}

div.item:nth-of-type(4) {
    background-image: url("../img/carousel-photos/4.jpg");
}

It may not be the best way to do it, but it works really well for me.

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

6 Answers6