I've been struggling to adjust the image height to take up 75% of the screen. I attempted using height: 75%; and class="h-75", but it doesn't seem to be effective. Currently, I have class="h-800" with h-800 { height: 800px; }, but this approach isn't producing a responsive design.
A good example of what I'm aiming for can be seen at
Below is my HTML code:
<div id="" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="h-800" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/1999463/pexels-photo-1999463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="h-800" alt="...">
</div>
</div>
</div>
And here's my CSS styling:
img {
height: 75%;
object-fit: cover;
width: 100%;
}
.h-800 {
height: 800px;
}