CODEWITHSUNDEEP
htmlcssbootstrap-4
Nielsi_
Nielsi_

Reputation: 47

How to decrease height and at the same time making it responsive in Bootstrap 4

I want to reduce the image height so that it takes 75% of the screen. I tried using height: 75%; and class="h-75" but that doesn't seem to work. Right now I have class="h-800" and then h-800 { height: 800px; } but that doesn't make it responsive.

A great example of what I want: https://heydays.no/

Here is my HTML:

  <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 CSS:

  img {
    height: 75%;
    object-fit: cover;
    width: 100%;
}

.h-800 {
    height: 800px;
}

Upvotes: 0

Views: 254

Answers (1)

Ashutosh Kumar
Ashutosh Kumar

Reputation: 907

You may use the viewport-height.

In, this example I'm creating a class .h75

.h75{
     height: 75vh;
}

Upvotes: 1

Related Questions