Bootstrap carousel image height
I'm having problems with images in bootstrap v4 image carousel. If I decrease the browser width, the image height stays the same, but the image width gets smaller, so the image is very stretched in height.
I've looked at similar topics here on stackoverflow and tried everything I found in the comments, but it still doesn't work. So I decided to create a new thread about this.
Here is the codepen link https://codepen.io/anon/pen/owNyyx , but I am also pasting the code here if you don't want to visit the codepen :)
So here is the code I have
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="images/image1.png" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random Title for image1</h3>
<p>Random description1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/image2.png" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random title for image2</h3>
<p>Random description2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="images/image3.png" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3>Random title for image3</h3>
<p>Random description3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
source to share
This is because img's parent .carousel-item
is display: flex
, and img
is flex-child, so it "stretches" by default align-items: stretch
in the parent.
Several ways to fix this. Perhaps the easiest way is to give a align-items
value other than stretch
.
Or, if you don't want to apply custom CSS and save your markup changes, wrap each one img
in a block element like div
or figure
, or anything that works on your site.
.carousel-item {
align-items: flex-start;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://www.adminhelp.pro/wp-content/uploads/2015/03/zadumalas_big_1900_600-1900x500.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>Cheap prizes for hairstyling</h3>
<p>Good prizes to style your hair</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://brazenwoman.com/wp-content/uploads/2017/04/woman-morning-bathrobe-bathroom-1900x500.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>3 Years of experience as Hairstylist</h3>
<p>Awesome results !</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://a.mktgcdn.com/p/Xxjv2UCFqkM_Ltr-Z80ydlVyo6vPpf1nZ5iPlELyxyM/1900x500.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h3>Some random caption text</h3>
<p>Some random description</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
source to share