How do we make the slider bootstrap correctly switched pictures with different height?

When you add images with different height and further switching between them begins the shift and significantly change the size of the slider but only in height. you need to find the height of all images, or the same as that with the code can be corrected. Here is the part of this section:
<section class="gellery">
 <h2 class="mb-5 font-weight-bold text-center">Gellery</h2>
 <div class="col-md-6 mb-4">
 <div id="carousel-example-1z" class="carousel slide carousel-fade data-ride="carousel>
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example-1z" data-slide-to="1" class=""></li>
 <li data-target="#carousel-example-1z" data-slide-to="2" class=""></li>
</ol>

 <div class="carousel-inner z-depth-1-half" role="listbox">
 <div class="carousel-item active">
 <img class="d-block w-100" src="/img/slide1.jpg" alt="First slide">
</div>
 <div class="carousel-item">
 <img class="d-block w-100" src="/img/slide2.jpg" alt="First slide">
</div>
 <div class="carousel-item">
 <img class="d-block w-100" src="/img/slide3.jpg" alt="First slide">
</div>
</div>

 <a href="#carousel-example-1z" class="carousel-control-prev" role="button" data-slide="prev">
 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
 <a href="#carousel-example-1z" class="carousel-control-next" role="button" data-slide="next">
 <span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
 </section>
March 12th 20 at 07:58
3 answers
March 12th 20 at 08:00
Solution
Did just like this:
.carousel-item {
 height: 350px;
 overflow: hidden;
}

and now all norms
March 12th 20 at 08:02
You can insert pictures not as img and as the property background: url(path to img).
The units themselves to make a fix.height tipo height 300px, then properties to cancel the repeat of the background and centering of the picture.

That as an option.
March 12th 20 at 08:04
The version with the background, of course the easiest. But in this case, the images on the slider will be "blurred".
I suggest this:
.carousel-item {
 height: 300px; /* Height of the slide */
 position: relative;
 overflow: hidden;
}

/*You can add your class to the image, and replace "img.d-block" below */

.carousel-item > img.d-block{
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
 object-fit: cover;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 margin: auto;
 position: absolute;
}
Added, but now when switching to other picture, the new appears under the picture which follows and she becomes just belim square and only then appears where it should be - garrick_Emmerich9 commented on March 12th 20 at 08:07
Thanks for the tip - garrick_Emmerich9 commented on March 12th 20 at 08:10
@garrick_Emmerich9, code tested 4 and 3 bootstrap. Probably, something interferes in the previous styles of the site. - dana.Murazik commented on March 12th 20 at 08:13

Find more questions by tags LayoutHTMLCSS