Sizing does not apply to images using bootstrap - html

Question

Sizing property of bootstrap does not apply to the images. If I try to style them inline, everything works as planned, but whenever I try to set it as h-100, the rule does not apply to the images anymore. Can somebody please explain why h-100 is not working?
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 h-100" src="img/hero-bg_1.jpg" alt="First slide">
<h1> Denim Jackets </h1>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/hero-bg_2.jpg" alt="Second slide" style="height: 100vh">
<h1> text on the second page </h1>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/hero-bg_3.jpg" alt="Third slide" style="height: 100vh">
<h1> text on the third page </h1>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Thank you!

Answer 1

In your case you are applying h-100 only to the image of active carousel. It didn't get applied because your parent element don't have a fixed height. Set a height to active class and check.
.active{
height:100vh;
}

Answer 2

I'm sorry in that case you can't apply width or height directly to the image tag.
Use the structure in the following way.
<div class="h-25 d-inline-block" style="width: 120px;
background-color: rgba(0,0,255,.1)"> <img class="rounded mx-auto
d-block" src="img/hero-bg_2.jpg" alt="Second slide" style="height:
100vh"></div