I have a Bootstrap carousel with the below code; how can I size this image to completely fill the carousel with losing image quality and also ensure the image height does not exceed the width or height of the carousel?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<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">
<div class="carousel-item active" style="width:400px;">
<img class="d-block w-100" src="{{articles.image.url}}" alt="First slide" style=" width:100%;height:auto;">
<div class="carousel-caption d-none d-md-block">
<h5>Latest</h5>
<p>{{articles.title}}</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">{% lorem 1 p %}
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">{% lorem 1 p %}
</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>
6
Answers
You can make the image 100% width and height auto.
Old code:
Edit the
carousel-item
with:Use object fit property in your css, and give a fixed width and height to
your image tag or respective class so that every image will have same width and height, Now Your Image won’t be distorted.
Another alternative is to use css background images instead of img tags and using the background-size cover property, which has more browser support as compared to img object fit property.
My previous image size was 960px*720px I was using it for a logo. This worked in reducing the size without stretching.
Using a CSS selector to point to that image adjust the height
The default value of width is auto.
You could adjust the value of the height as you see fit depending on what you are aiming for.
I faced the same problem and I fixed that by add d-flex and justify content to center images like this,
Then I used those CSS property
You should use margin inside .slide-control class , otherwise slide will go, end of the left side.