How do I make the bootstrap carousel scale properly?
Question
I'm using a bootstrap carousel and noticed on mobile and smaller screens, the images just look really "skinny". I know this is part of the responsiveness, but I've seen on some sites where the carousel maintains it's original aspect ratio and just scales to a smaller carousel.
How can I do this with my code?
https://jsfiddle.net/nv7rsgpg/9/share
It seems when I change height: 100vh to auto, it works, but then every time I click the arrow buttons the height of course constantly keeps changing depending on the size of them.
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top" onclick = $("#menu-close").click(); >Start Bootstrap</a>
</li>
<li>
<a href="#top" onclick = $("#menu-close").click(); >Home</a>
</li>
<li>
<a href="#about" onclick = $("#menu-close").click(); >About</a>
</li>
<li>
<a href="#services" onclick = $("#menu-close").click(); >Services</a>
</li>
<li>
<a href="#portfolio" onclick = $("#menu-close").click(); >Portfolio</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >Contact</a>
</li>
</ul>
</nav>
<header>
<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" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/460/345/cats" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/abstract" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/transportation" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- About -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="myCarousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
<li data-target="#myCarousel2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel2" 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="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>Our Services</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cloud fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-light">Learn More</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-compass fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-light">Learn More</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flask fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-light">Learn More</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#" class="btn btn-light">Learn More</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Callout -->
<aside class="callout">
<div class="text-vertical-center">
<h1>Vertically Centered Text</h1>
</div>
</aside>
<!-- Portfolio -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Our Work</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-1.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-2.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-3.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-4.jpg">
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
<a href="#" class="btn btn-dark">View More Items</a>
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Call to Action -->
<aside class="call-to-action bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>The buttons below are impossible to resist.</h3>
<a href="#" class="btn btn-lg btn-light">Click Me!</a>
<a href="#" class="btn btn-lg btn-dark">Look at Me!</a>
</div>
</div>
</div>
</aside>
<!-- Map -->
<section id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
<a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A"></a>
</small>
</iframe>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h4><strong>Start Bootstrap</strong>
</h4>
<p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (123) 456-7890</li>
<li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:name@example.com">name@example.com</a>
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-dribbble fa-fw fa-3x"></i></a>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#]):not([href=#myCarousel]):not([href="#myCarousel2])"').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
height: 100vh;
}
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}
.v-center {
position: absolute;
height:100px;
width:40%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
left:15%;
}
2 answers
solution1
1 2015-07-06 06:46:04
You can add the .img-responsive class to your images and let bootstrap scale them accordingly.
So your image tag will look like:
<img class="img-responsive" src="http://lorempixel.com/460/345/business" />
You can do this for all images.
Responsive images automatically adjust to fit the size of the screen.
solution2
0 2015-07-06 06:52:58
When you apply height: 100vh; you are applying certain height to all images. So carousel heights remains same. But when you apply height: auto; then carousel uses original height of the image.
Another thing that I noticed is , you are applying width: 100%; to every carousel image. If image is of less dimensions, it will loose its quality.
Better approach would be to keep he auto and use images of correct dimensions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I make my Bootstrap Carousel the full width of the page?
How do I get bootstrap carousel to slide?
How to scale down images in bootstrap carousel
How do I make carousel slideshow smaller?
How do I make this carousel implementation better?
How to make this type of bootstrap carousel
How to make bootstrap carousel interactive?
How can i make the Javascript work for a Carousel by using bootstrap 4?
How can I make carousel use 2 row in 1 column using Bootstrap
How do I get the text to show above the overlay in this bootstrap carousel?
Related Tags