CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dosenbiiir
Dosenbiiir

Reputation: 323

Bootstrap left column max height to height of right column

Im using Bootstrap and searching for a CSS/SCSS solution for the following problem. I have 2 columns inside a row. The left column contains an image and the right one contains a complex grid structure itselfs. The height of the right column depends on it's content and I want the left image to fit the height of the right column.

visualisation of the layout

Here is a simple code example:

.fill-height {
  /* should have same height as right column */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <div class="row">
    <div class="col-4">
      <img class="fill-height img-fluid" src="https://picsum.photos/200/300">
    </div>
    
    <div class="col-8">
      
      <!-- ... other rows and columns... 
      to simplify, just a text here
      -->
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      </p>
      
    </div>
  </div>

</div>

Without any extra CSS booth columns height is defined by its biggest column. I tried using max-height: 100% but thats not working because I can't set a fixed height of the parent (row), because the row height should be defined by the height of the right column.

I also tried using display: table and display: table-cell, maybee I did something wrong but that destroyed my complete layout of the right column

All solutions I found do not address my problem or don't solve it properly.

Upvotes: 0

Views: 1645

Answers (2)

Jakub A Suplicki
Jakub A Suplicki

Reputation: 4801

You could try to achieve that with a little bit of JS.

Basically the idea is to get the height from the content on the right side and then resize the image afterward.

let elSize = document.getElementById("myContent").offsetHeight;
document.getElementsByClassName("img-fluid")[0].style.height = elSize+"px";
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

  <div class="row">
    <div class="col-4">
      <img class="fill-height img-fluid" src="https://picsum.photos/200/300">
    </div>
    
    <div class="col-8">
      <div id="myContent">
            <!-- ... other rows and columns... 
      to simplify, just a text here
      -->
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      </p>
      </div>

      
    </div>
  </div>

</div>

Upvotes: 1

diva_codes
diva_codes

Reputation: 39

This should work:

.col-4 {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.col-4 img {
    width: 100% !important;  
}

I added the !important because I'm assuming it's Bootstrap and sometimes it overrides CSS values, feel free to remove them if it works without them.

Upvotes: 0

Related Questions