CODEWITHSUNDEEP
csstwitter-bootstrap
kiranpradeep
kiranpradeep

Reputation: 11201

Bootstrap 4: fitting image content inside parent div

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%;
}

Upvotes: 1

Views: 1707

Answers (1)

Amaresh S M
Amaresh S M

Reputation: 3010

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/[email protected]/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>

Upvotes: 3

Related Questions