I am tring to make a carousel fill all the space in a section. But it is flowing out of the section. I need to position my carousel inside first section.
I am using twitter bootstrap3 and html5.
CSS
#section1 {
height: 500px;
color: #fff;
background-color: #1E88E5;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
img {
height: 50px;
}
HTML
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
---------------------------------------------------------------------------
<div id="section1" class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="1.jpg" alt="Los Angeles" style=" height=20px ">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="2.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="3.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
jsFiddle
first of all if you are dealing with responsiveness then your style will be as following:
#section1 {
min-height: 500px; //according to your background image size
color: #fff;
background-color: #1E88E5; // no need if you are setting background image on whole div
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
img {
height: 50px; // Don't hardcoded the height of image untill you deal with some specific div width.
}
In your case the <div> has class called container-fluid.
In your carousel <div> you have to add your <img> as follow:
<div class="item active">
<img class="img-responsive" src="1.jpg" alt="Los Angeles" style="display:inline-block;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
And to clear this plz provide the snippet of your code to proper understanding.
Related
i want navbar Bootstrap 4 over all element,
now can over all element but when use Carousel in Body navbar-collapse
NAVBAR - HTML
<nav class="navbar navbar-expand-md navbar-dark bg-main">
<a class="navbar-brand d-md-none order-1" style="font-size:26px;line-height:0" href="#">【K】【S】【J】</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex flex-column flex-row flex-lg-row flex-xl-row justify-content-lg-end bg-main p-3 p-lg-0 mt-5 mt-lg-0 mobileMenu" id="navbarSupportedContent">
<ul class="navbar-nav d-flex d-flex justify-content-around text-right px-3" dir="rtl">
<li class="nav-item active" style="">
<a class="nav-link" href="#">
<span>Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span>Anout</span>
</a>
</li>
</ul>
</div>
</nav>
NAVBAR - CSS
/* Mobile Menu */
#media only screen and (max-width: 992px) {
.mobileMenu {
position: fixed;
top: 70px;
bottom: 0;
right: -100rem;
margin: auto;
transform: translateX(-100);
transition: all ease .25s;
}
.open-nav {
right:0;
}
.body-blur{
filter: blur(5px)
}
}
Carousel - HTML
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="~/Content/documents/shared/dev1.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="~/Content/documents/shared/dev2.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="~/Content/documents/shared/dev7.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
<div class="carousel-item">
<img src="~/Content/documents/shared/dev6.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
#*<a class="carousel-control-prev shadow-lg" href="#mainCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next shadow-lg" href="#mainCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>*#
</div>
Carousel - CSS
.carousel-inner img {
width: 100%;
height: 600px;
}
Open Nav
$('.navbar-toggler').on('click',function () {
$('.mobileMenu').toggleClass('open-nav');
$('.app-content').toggleClass('body-blur');
});
Use Bootstrap 4, ASP.NET MVC5
Open Nav and
Close Nav
When Remove Carousel code nav bar work and open success
Remove Carousel
if use any div not problem and work but when use Carousel nav hidden back Carousel.
**Thanks for all suggestions **
Try it:
.mobileMenu {
z-index: 9999999;
}
I have been trying to solve a problem that I have on a website that I am building. The website displays correctly on a desktop browser when it is normal size, but when you make the browser window small or view the site on a mobile phone, I have a layer that overlaps with the footer div on the page.
Please look at this image of the problem:
The layer with the div that overlaps my footer has a class of logodiv, here is my css code for it:
.logodiv{
text-align: center;
top: 50%;
transform: translateY(-50%);
font-family: 'Quicksand', sans-serif;
font-size: 20px;
display: block;
}
The heading has a ID name of logoheadline and has the following css
#logoheadline{
font-family: 'Anton', sans-serif;
font-size: 58px;
position: relative;
}
Lastly my footer has a class name of footerz and it has the following css:
.footerz{
background-color: #323232;
min-height: 200px;
color: white;
font-family: 'Quicksand', sans-serif;
}
the intro-p div has the following css:
.intro-p{
font-family: 'Quicksand', sans-serif;
font-size: 20px;
position: relative;
}
this is the html I have:
<section id="section01" class="demo">
<div class="col-md-12" id="main-bd">
<div class="col-md-4 col-md-offset-1 logodiv" >
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive center-block" src="images/activities.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/chat.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/map.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/hot.png" height="470" width="245" alt="Activities">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class=" col-md-6 logodiv" >
<br>
<h1 id="logoheadline">Getting together has never been easier! </h1>
<p class="intro-p">Create events and activities, find hot new places to visit, see where your friends hang out all from within the spaze app!</p>
<button class="gbtnHollow">Download</button><br><br><br>
</div>
<span></span>
</div>
</section>
<section id="section02" class="demo2">
<div class="container-fluid footerz">
<div class="col-md-2">
<br>
<ul id="footerul">
<li><a href='privacy.html'>Privacy Policy</a></li>
<li><a href='terms.html'>Terms & Conditions</a></li>
<li><a href='#'>Ads</a></li>
</ul>
</div>
<div class="col-md-4">
<br>
<div class="col-md-4 col-md-offset-2">
<ul id="footerul">
<li>Contact Us</li>
<li><a href='#'>Our Story</a></li>
<li><a href='#'>Press Kit</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<br>
<div class="col-md-12 ">
<ul id="footerul">
<li><a href='#'>Jobs</a></li>
<li><a href='#'>Angel Investors</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<br>
<!--This is where all the social media buttons need to go.-->
<ul class="list-inline" >
<li> <img src="./images/facebook.png" alt="Facebook" width="35" height="35"> </li>
<li> <img src="./images/instagram.png" alt="Instagram" width="35" height="35"> </li>
<li> <img src="./images/twitter.png" alt="Instagram" width="35" height="35"> </li>
</ul>
</div><br>
<div class="col-md-12" style="text-align: center;">
<br>
</div>
</div>
</section>
I have been scratching my head for a while, can someone tell me what are my missing?
Remove that top :50% from your logindiv. top is used with position property of Css that may have created problem in your code. Basically avoid using position forcefully. Use them where when it is required.
You are using col-md- class only , that's why you have faced this issues, you can simply fix this you can add col-xs- classes instead of col-md- class , after 1200px col-md- classes getting 100% width
Soo... if anyone has a few minutes to spare and can take a look at my code and help me out here... I have a problem that I can't solve and have been busting my head for hours now...
So I'm making a page for a local intermunicipal Football Association using Bootstrap and I'm trying to achieve this: the carousel overlaying the background image, dont mind the blue and yellow thing...
and this is what I get:
Here is my code:
HTML:
<!--Background image-->
<div class="bg">
<img src="img/football-field.jpg" class="img-responsive" alt="ozadje">
</div>
<!--Main content of page-->
<section id="main-content">
<div class="container">
<div class="col-md-2 col-sm-2 navigation">
content content
content content
content content
content content
content content
content content
</div>
<!--Beginning of carousel-->
<div class="col-md-10 col-md-10 galery">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/example.jpg" alt="desc">
</div>
<div class="item">
<img src="img/example.jpg" alt="desc">
</div>
<div class="item">
<img src="img/example.jpg" alt="desc">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
and my CSS:
.bg{
height: 420px;
z-index: -999;
}
#main-content{
z-index: 100;
background-color: white;
}
I'd realy apreciate some help :)
P.S. I hope you understand what I mean and am trying to acomplish... English is not my native language so there may be some poor choice of words and bad exlenation and a lot of typos :)
Using z-index only to display your content over your background image won't work.
In fact, z-index only works on an element with an absolute or fixed position.
The most easy and i believe most clean way to achieve what you want is to put your image as your page's background (with the css 'background' proprety).
#main-content{
background-image: url('img/football-field.jpg');
background-color: white;
}
An other way would be to make your section overlap the backgroung div.
#main-content{
position: absolute;
top: 0;
left: 0;
background: none;
}
You can set position value to your element so that the z-index works. It's either you use position fixed, absolute, or relative. Note that they are not the same and you need to add some css to it. Please see explanation here .
Sample:
header {
height: 100px;
position: relative;
}
header img {
width: 100%;
height: 100%;
}
.start {
position: absolute;
z-index: 100;
top: 0;
}
.navigation {
background: #F7F7F7;
}
#main-content{
position: relative;
background-color: white;
margin-top:-1.5em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<!--Main content of page-->
<section id="main-content">
<header>
<img src="https://image.shutterstock.com/z/stock-photo-american-football-players-in-the-action-grand-arena-345202907.jpg" alt="ozadje">
</header>
<div class="container start">
<div class="col-md-2 col-xs-2 navigation">
content content
content content
content content
content content
content content
content content
</div>
<!--Beginning of carousel-->
<div class="col-md-10 col-xs-10 galery">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://via.placeholder.com/950x250" alt="desc">
</div>
<div class="item">
<img src="http://via.placeholder.com/950x250" alt="desc">
</div>
<div class="item">
<img src="http://via.placeholder.com/950x250" alt="desc">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
It does not look very nice if you run it, but you can maybe get an idea from this code. Instead of using a div and insert an image (which pushes your div down) you could set a background image in css:
#main-content{
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Football_iu_1996.jpg/1200px-Football_iu_1996.jpg");
background-color: white;
}
.item img {
min-width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--Main content of page-->
<section id="main-content">
<div class="container">
<div class="col-md-2 col-sm-2 navigation">
content content
content content
content content
content content
content content
content content
</div>
<!--Beginning of carousel-->
<div class="col-md-10 col-md-10 galery">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/400/200/sports/" alt="desc">
</div>
<div class="item">
<img src="http://lorempixel.com/400/200/sports/" alt="desc">
</div>
<div class="item">
<img src="http://lorempixel.com/400/200/sports/" alt="desc">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
It is probably not exactly as you want it but it may be helps you to get on track.
Hope it helps a bit.
I've got a carousel that has a width:100% and a height:831px on a fluid layout. I am having problems centering the images that are 3600px wide by 831px high. I need the images to be centered on all viewport widths and resolutions.
I've tried to use transform:translateX, but the images always end up at left:0.
This is what I have:
<div class="mainTopVisual clearfix">
<div id="m_top-visual" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#m_top-visual" data-slide-to="0" class="active"></li>
<li data-target="#m_top-visual" data-slide-to="1"></li>
<li data-target="#m_top-visual" data-slide-to="2"></li>
<li data-target="#m_top-visual" data-slide-to="3"></li>
<li data-target="#m_top-visual" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/main/j1.jpg" alt="First slide">
</div>
<div class="item">
<img class="second-slide" src="images/main/j2.jpg" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="images/main/j3.jpg" alt="Third slide">
</div>
<div class="item">
<img class="forth-slide" src="images/main/j4.jpg" alt="Forth slide">
</div>
<div class="item">
<img class="fifth-slide" src="images/main/j5.jpg" alt="Fifth slide">
</div>
</div>
<a class="left carousel-control" href="#m_top-visual" role="button" data-slide="prev">
<span class="main_top-visual flaticon-left-arrow" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#m_top-visual" role="button" data-slide="next">
<span class="main_top-visual flaticon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div id="carouselButtons">
<button id="playButton" type="button" class="btn btn-default">
<span class="flaticon-arrows-3"></span>
</button>
<button id="pauseButton" type="button" class="btn btn-default">
<span class="flaticon-pause-bars"></span>
</button>
</div>
</div><!-- /.carousel -->
</div>
and this is the CSS:
<style>
div.mainTopVisual{
margin-top:0;
padding-top:0;
padding-bottom:0;
}
.m_top-visual_inner{
width:100%;
margin:0;
position:relative;
}
.carousel {
height: 831px;
margin-bottom:0;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;}
.carousel .item {
height: 831px;
width:3600px;
background-color: #000;
}
.carousel-inner > .item > img {
position: absolute;
width:3600px;
height:831px;
top:0;
left:50%;
transform:translate(-50%, 0);
max-width:none;
}
</style>
Thank you very much in advance for your help.
For those having the same problem, I found the answer here http://parkhurstdesign.com/improved-carousels-twitter-bootstrap/
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 {
margin-top: 20px;
.carousel-inner {
height: auto;
.item {
height:500px;
line-height:300px;
}
}
}
}
#media(max-width: 991px){
.carousel-custom {
margin-top: 20px;
.carousel-inner {
height: auto;
.item {
height:300px;
line-height:300px;
text-align:center;
}
}
}
}
And here is my markup:
<div id="carousel-custom-1188" class="carousel slide carousel-custom" data-ride="carousel">
<div class="carousel-outer">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459261752/w8edcuvz1yl3uc4g4o34.jpg" alt="Jinallzupvfazqqr67nd">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459175684/w4ueot8o49dh2fyulv0x.jpg" alt="K1yov5hpur8mgsb9r15p">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459178926/fwlmuroj2wlz7czrsha0.jpg" alt="Lqfandhmutdkppjrl932">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-custom-1188" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-custom-1188" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators mCustomScrollbar">
<li data-target="#carousel-custom-1188" data-slide-to="0" class="active">
<img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png" alt="Jinallzupvfazqqr67nd">
</li>
<li data-target="#carousel-custom-1188" data-slide-to="1" class="">
<img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png" alt="K1yov5hpur8mgsb9r15p">
</li>
<li data-target="#carousel-custom-1188" data-slide-to="2" class="">
<img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png" alt="Lqfandhmutdkppjrl932">
</li>
</ol>
</div>
</div>
The issue is that I have images that are very wide, others very narrow and high, and others with a good ration height/width in the same carousel.
I'd like to have the wide images centered vertically (with a width of a 100%), high images centered horizontally (with a height of 100%) and "normal" images (with a decent ratio height/width) filling all the carousel.
Here is what I'm trying to do (first image is an example with a very wide image, second image with a very high one, and last one has a "decent" ratio).
How could I achieve this ? I've tried Make Bootstrap's Carousel both center AND responsive? and other tricks found on Google but none did this.
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" alt="">
</div>
</div>
<!-- controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="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: 50px 0;
}
.tester {
height: 100%;
}
</style>
</head>
<body>
<div class="tester">
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</div>
</body>
Again, hope it helps!
simply use image on absolute if your slider height is fixed
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="middle">
<img src="http://placehold.it/1920x500">
</div>
</div>
<div class="item">
<div class="middle">
<img src="http://placehold.it/1920x300">
</div>
</div>
<div class="item">
<div class="middle">
<img src="http://placehold.it/600x900">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="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 */
}
.middle img {
max-width: 100%;
max-height: 100%; /*what ever height */
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
see fiddle
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....