CODEWITHSUNDEEP
cssimagetwitter-bootstrapcarousel
David Leonard
David Leonard

Reputation: 91

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.

Upvotes: 9

Views: 27370

Answers (6)

Martin Omacht
Martin Omacht

Reputation: 425

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.

Upvotes: 0

Naragot
Naragot

Reputation: 201

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.

Upvotes: 20

YorickH
YorickH

Reputation: 391

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

Upvotes: 1

grigson
grigson

Reputation: 3726

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.

Upvotes: 6

cavemanstyle
cavemanstyle

Reputation: 1

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.

Upvotes: 0

Shivam Pandya
Shivam Pandya

Reputation: 1061

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

Upvotes: 1

Related Questions