Bootstrap轮播占据了我的整个页面

Question

我想要一个旋转木马，它可以装满大约一半的窗户。我一直在阅读文档https://getbootstrap.com/docs/4.1/components/carousel/和youtube教程以寻求帮助https://youtu.be/9cKsq14Kfsw?t=3510。我的图像充满了整个页面，还有更多内容（向下滚动时），除了在CSS中设置固定的高度（使图像看起来很紧缩）外，我不知道如何缩小它。

这是我的代码

html, body {
    width: 100%;
    height: 100%;
}

.carousel-inner img {
    width: 100%;
    height: 100%;
}

<!-- Image carousel -->
    <div id="slides" class="carousel slide" data-ride="carousel">

        <!-- Carousel images -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/home-1.png" />
                <div class="carousel-caption">
                    <h1 class="display-2">Garnet Home Inspections</h1>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/home-2.png" />
                <div class="carousel-caption">
                    <h1 class="display-3">Service Area</h1>
                    <h3>I travel all over the capital Region</h3>
                    <button type="button" class="btn btn-outline-light btn-lg">SET UP AN APPOINTMENT</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/home-3.png" />
                <div class="carousel-caption">
                    <!-- put content here -->
                </div>
            </div>
        </div>

        <!-- Carousel buttons-->
        <a class="carousel-control-prev" href="#slides" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>   <!-- Screenreaders only -->
        </a>
        <a class="carousel-control-next" href="#slides" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>   <!-- Screenreaders only -->
        </a>

    </div>

预先感谢您：）

如果有人需要更多信息/代码，请告诉我。