Bootstrap 4.1 карусельный эффект затухания изображения

Question

:) Я работаю с каруселью Bootstrap и ищу решение, которое работает. Я хочу, чтобы меньшие изображения растягивались до разрешения экрана пользователя. В Интернете уже есть несколько учебных пособий, но любой из них работает с текущей версией Bootstrap.

Я заметил, что во время эффекта карусели мое изображение реагирует так, как мне нужно. Я загрузил исходный код Bootstrap, чтобы найти конкретную строку, но не смог найти это.

Может кто-нибудь сказать мне, как скопировать этот эффект, чтобы получить отзывчивое изображение в моей карусели? Или, может быть, у вас есть собственное решение этой проблемы?

 <div class="row inner-bg" id="slider-calosc">
        <div class="col-xs-12 text">
            <div id="slider" class="carousel slide carousel-fade" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#slider" data-slide-to="0" class="active"></li>
                    <li data-target="#slider" data-slide-to="1"></li>
                    <li data-target="#slider" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active ">
                        <img class="img-fluid" src="slider1.jpg" alt="First slide">
                        <div class="d-block p-2 carousel-caption justify-content-center">
                            <h3>mytext</h3>
                            <p class="d-block p-2 podpisy-slider">mytext</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="slider2.jpg" alt="Second slide">
                        <div class="d-block p-2 carousel-caption  justify-content-center">
                            <h3>mytext</h3>
                            <p class="d-block p-2 podpisy-slider">Informatyka <span class="akcent">mytext</span></p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="slider3.jpg" alt="Third slide">
                        <div class="d-block p-2 carousel-caption justify-content-center">
                            <h3>mytext</h3>
                            <p class="d-block p-2 podpisy-slider">mytext</p>
                        </div>
                    </div>
                </div>

                <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Poprzedni</span></a>

                <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Następny</span></a>
            </div>
        </div>
    </div>

И CSS

.carousel-caption {
display: flex;
transform: translateY(-50%);
align-items: center;
top: 50%;
right: 0;
left: 0;
bottom: auto;
}
.carousel-item .img-fluid {
width: 100%;

}

.carousel-item a {
display: block;
width: 100%;
}
.podpisy-slider {

font-size: 3vw;
text-transform: uppercase;
font-weight: 800;

}