Bootstrap carousel is filling my whole page - html

Question

I would like a carousel that fills about half of the window. I've been reading through the documentation https://getbootstrap.com/docs/4.1/components/carousel/ and a following a youtube tutorial for help https://youtu.be/9cKsq14Kfsw?t=3510. My images fill the entire page plus more (when scrolled down) and I can't figure out how to make it smaller other than setting a fixed height in CSS which makes the image look squashed.
Here is my code
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>
Thank you in advance :)
If anyone needs more information/code please let me know.