Bootstrap 4: fitting image content inside parent div

Question

Using Bootstrap grids, I have split the full page into two rows (25% height and 75% height). I like an image to be contained inside the first 25% row in a responsive manner. I like to avoid setting a fixed height and want the image to occupy as much height as possible. I have tried following most answers in similar previous questions 1, 2 and 3, but none of them are working.

What I did till now: I tried using object-fit, but could not get it to work. Also it appears the parent div display property set to flex is the issue. But I am not able to find an alternative. Below is code and also please find MCVE in jsFiddle [link].

<div class="container-fluid h-100">
  <div class="row h-25">
    <div class="col">
      <img src="https://getbootstrap.com/docs/5.0/assets/img/bootstrap-icons.png" 
           class="img-fluid" alt="Responsive image">
    </div>
  </div>
  <div class="row h-75">
    <div class="col">
      75 Percent Height
    </div>
  </div>
</div>

html,body {
  height: 100%;
}

you can try setting the image as background image. – Debsmita Paul Jan 13 '21 at 06:46 — Debsmita Paul, Jan 13 '21 at 06:46

score 3 · Accepted Answer · edited Jan 13 '21 at 07:10

I hope this is what u are expecting. I have added h-100classes to img tag and h-100 to img parent col tag

<div class="container-fluid h-100">
  <div class="row h-25">
    <div class="col h-100">
      <img src="https://getbootstrap.com/docs/5.0/assets/img/bootstrap-icons.png" class="img-fluid h-100" alt="Responsive image">
    </div>
  </div>
  <div class="row h-75">
    <div class="col">
      75 Percent Height
    </div>
  </div>
</div>

.row {
  outline: 3px solid rgba(0, 0, 255, 1);
}

html,
body {
  height: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="container-fluid h-100">
  <div class="row h-25">
    <div class="col h-100">
      <img src="https://getbootstrap.com/docs/5.0/assets/img/bootstrap-icons.png" class="img-fluid h-100" alt="Responsive image">
    </div>
  </div>
  <div class="row h-75">
    <div class="col">
      75 Percent Height
    </div>
  </div>
</div>

Thanks. I used only h-100 for img or else aspect ratio was lost. Thanks again. — kiranpradeep, Jan 13 '21 at 07:08

Bootstrap 4: fitting image content inside parent div

1 Answers1