how to control the size of images in carousel - css

Question

hi guys i hope you all having a good day just in brief my problem is i have a carousel code made by bootstrap and it's working good but the three images that i had inside the carousel they don't have the same height and i wanna make them full width and i tried to control them by their classes but it didn't work and i tried to gave each image a id but the same thing happened again i didn't work .in honestly i'm seeking from this issue and i don't know how i can deal with it so hopefully y'all can help me with that and thanx again.

Answer 1

You could give a fixed height and overflow: hidden; to .carousel-inner .item class.
So the lines to be added will be
.carousel-inner .item{
height: 300px;
overflow: hidden;
}
On doing this, if the image inside any of the slide is greater than the provided height, then the rest of the image will be hidden. But this may not be the best practice as this may hide important portions of the slide images but if you wish to have uniform height for all the slides in the carousel, then probably this is the best option (2nd best if you consider the option of keeping all images of same dimensions).

Answer 2

here is the css of my file
/*------------------------------------------*/
/*Bootstrap button outline override*/
/*------------------------------------------*/
.btn-outline {
background-color: transparent;
color: inherit;
transition: all .2s;
}
.btn-primary.btn-outline {
color: #428bca;
}
.btn-success.btn-outline {
color: #5cb85c;
}
.btn-info.btn-outline {
color: #5bc0de;
}
.btn-warning.btn-outline {
color: #f0ad4e;
}
.btn-danger.btn-outline {
color: #d9534f;
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
color: #fff;
}
/*------------------------------------------*/
/*CSS CUSTOMIZE*/
/*------------------------------------------*/
#info-btn { margin-right: 2%; }
/*------------------------------------------*/
/*carousel*/
/*-----------------------------------------*/
.carousel-inner .item{
height: 638px;
overflow: hidden;
}
<!-- Carousel feature -->
<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. -->
<img src="img/taxi.jpeg" class="fill">
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<img src="img/ocean.jpeg" class="fill">
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<img src="img/nyc.jpeg" class="fill">
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<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>