Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 290
David Leonard Avatar asked Feb 01 '13 20:02

David Leonard


People also ask

How do you make a carousel picture full height?

You have to set the height of the outer div with id="myCarousel" to 100%. So add it in the css file or in the html file. Too use the full height you need to set the height of the <html> and <body> to 100% (often the first two classes in a css file).

What size should bootstrap carousel images be?

If you want to have a carousel image that spans the full width of the screen its probably a good idea to use an image that is at least 1024 px wide (possibly wider), though you don't want it to be too high resolution, since that would take a long time to load.

How do you fit an image in Carousel css?

There are ways to fiddle with the image size via css but you will most likely end up with undesirable results such as squished or stretched looking images. 1 method is to use a div with a specified size, use css to set the image as a background image for the div and set background-size to fit, contain or cover.


2 Answers

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.

like image 74
Naragot Avatar answered Oct 12 '22 02:10

Naragot


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.

like image 35
grigson Avatar answered Oct 12 '22 03:10

grigson