Responsive (background) image in a bootstrap column to match the height of the content in adjacent column

user_8270343 0
Viewed 1779

The image in the left column needs to be responsive based on the height of the content in the adjacent column.

In this screenshot here: enter image description here the image takes up too much vertical space.

Just using the img-fluid class on an image doesn't work because that's not stretching the image to the required height.

background-size: cover; is what I'd normally need but then I'd need to set a fixed height which is the opposite of responsive.

So, how to make the image (or background image) responsive AND at the same time have it match the height of the content in the adjacent column?

Current code: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
    <div class="row">
        <div class="col-6 px-0">
            <img class="img-fluid" src="https://via.placeholder.com/3000x2000" alt="">
            </div>
        <div class="col-6">
            Some text...<br>
            more<br>
            text<br>
            and<br>
            stuff<br>
            for<br>
            more<br>
            height
        </div>
    </div>
</div>

bootstrap-4
2 Answers

You could use an absolute positioned inner div to contain the image. Since the row is flexbox, that's the only way to shrink the left col to the height of the text in the right col.

<div class="container-fluid px-0">
    <div class="row">
        <!-- img-fluid normal up to 'md' width -->
        <div class="col d-md-none">
           <img class="img-fluid" src="https://via.placeholder.com/3000x2000" alt="">
        </div>
        <!-- from 'md' width onwards convert to flex column 
        + add an absolute positioned inner div to contain the image -->
        <div class="col-md-6 px-0 d-none d-md-flex flex-column justify-content-center o-hidden">
            <div class="position-absolute o-hidden">
                <img class="mh-100 mw-100 d-block" src="https://via.placeholder.com/3000x2000" alt="">
            </div>
        </div>
        <div class="col-md-6">
            Some text...
            <br> more
            <br> text
            <br> and
            <br> stuff
            <br> for
            <br> more
            <br> height
        </div>
    </div>
</div>

.o-hidden {
    overflow:hidden; 
}

https://www.codeply.com/go/4fyb94J3OX

user_1714560

You can set image height based on the text height in the other col via js like this

$(document).ready(function() {
  var colTwoHeight = $('#colTwoInner').height();
  $('#colOneImg').css('cssText', 'height:'+colTwoHeight+'px !important;');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
    <div class="row">
        <div id="colOne" class="col-6 px-0">
            <img id="colOneImg" class="" src="https://via.placeholder.com/3000x2000" alt="">
            </div>
        <div id="colTwo" class="col-6">
          <div id="colTwoInner">
              Some text...<br>
              more<br>
              text<br>
              and<br>
              stuff<br>
              for<br>
              more<br>
              height
          </div>
        </div>
    </div>
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>

user_56095010
Related