Bootstrap Carousel With Fixed Height: Center Image Horizontally Or Vertically Based On Image Dimensions
I have a bootstrap carousel with a fixed height. Here is the CSS: .carousel-custom .carousel-outer { position: relative; } @media(min-width: 992px){ .carousel-custom {
Solution 1:
Since the .item elements are relative positioned you could just position the img elements absolutely. Giving the .item elements a fixed height, will help to vertically and horizontally align the images inside.
I'm sure there are lots of different ways to do this, here is one example. Hope it helps.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
body {
background-color: black;
}
.carousel-inner > .item {
height: 100vh;
}
.carousel-inner > .item > img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 800px;
width: auto;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><divclass="container"><divid="carousel-example-generic"class="carousel slide"data-ride="carousel"><!-- indicators --><olclass="carousel-indicators"><lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li><lidata-target="#carousel-example-generic"data-slide-to="1"></li><lidata-target="#carousel-example-generic"data-slide-to="2"></li></ol><!-- inner --><divclass="carousel-inner"role="listbox"><divclass="item active"><imgsrc="http://placehold.it/1200x600/2c3e50/000"alt=""></div><divclass="item"><imgsrc="http://placehold.it/600x1200/d35400/000"alt=""></div><divclass="item"><imgsrc="http://placehold.it/600x600/c0392b/000"alt=""></div></div><!-- controls --><aclass="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div></div>Solution 2:
Alright, I've been fiddling around for a while now. Ended up with the result below. Hope it helps and answers your question (at least for a small part).
<head><title>Bootstrap Carousel</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><style>html,
body {
height: 100%;
}
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
/* Background images are set within the HTML using inline CSS, not here */.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
footer {
margin: 50px0;
}
.tester {
height: 100%;
}
</style></head><body><divclass="tester"><!-- Full Page Image Background Carousel Header --><headerid="myCarousel"class="carousel slide"><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li></ol><!-- Wrapper for Slides --><divclass="carousel-inner"><divclass="item active"><!-- Set the first background image using inline CSS below. --><divclass="fill"style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png');"></div><divclass="carousel-caption"><h2>Caption 1</h2></div></div><divclass="item"><!-- Set the second background image using inline CSS below. --><divclass="fill"style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png');"></div><divclass="carousel-caption"><h2>Caption 2</h2></div></div><divclass="item"><!-- Set the third background image using inline CSS below. --><divclass="fill"style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png');"></div><divclass="carousel-caption"><h2>Caption 3</h2></div></div></div><aclass="left carousel-control"href="#myCarousel"data-slide="prev"><spanclass="icon-prev"></span></a><aclass="right carousel-control"href="#myCarousel"data-slide="next"><spanclass="icon-next"></span></a></header><script>
$('.carousel').carousel({
interval: 5000//changes the speed
})
</script></div></body>Again, hope it helps!
Solution 3:
simply use image on absolute if your slider height is fixed
<divid="carousel-example-generic"class="carousel slide"data-ride="carousel"><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li><lidata-target="#carousel-example-generic"data-slide-to="1"></li><lidata-target="#carousel-example-generic"data-slide-to="2"></li></ol><!-- Wrapper for slides --><divclass="carousel-inner"role="listbox"><divclass="item active"><divclass="middle"><imgsrc="http://placehold.it/1920x500"></div></div><divclass="item"><divclass="middle"><imgsrc="http://placehold.it/1920x300"></div></div><divclass="item"><divclass="middle"><imgsrc="http://placehold.it/600x900"></div></div></div><!-- Controls --><aclass="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div>css
.carousel {
width: 500px; /*test width*/height: 300px; /*what ever height */
}
.middle {
position: relative;
height: 300px; /*what ever height */
}
.middleimg {
max-width: 100%;
max-height: 100%; /*what ever height */margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
see fiddle
Solution 4:
If you try to achieve this in bootstrap carousel, you will end up with black bars in top and bottom...I was stuck with similar problem and ended up using "flickity" js library..it works lot better than tryig to achieve this on something not meant for this....
Post a Comment for "Bootstrap Carousel With Fixed Height: Center Image Horizontally Or Vertically Based On Image Dimensions"