In the carousel currently displayed on my website, there are three images that are enclosed within the following HTML tag:
Despite exploring various online solutions, I have not been able to resolve the issue. Adjusting the height and width settings has only led to distorted images.
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="img/classic%20physique_frontshotflexed.JPG">
<!--Img-fluid resizes the image while w-100 makes it full screen. These settings must be updated later on. -->
<div class="carousel-caption">
<h5>My First Competition</h5>
I am hoping to achieve an image with a fixed height of 570px, rather than the default auto height. Any guidance on how to accomplish this would be greatly appreciated.