0

I have a boostrap row containing 2 columns, the left column contains some text, the right column contains an image.

I want to set the max-height of the right column to be equal to the height of the left column - which may change due to resizing of the window (has a min-height property).

I want to crop the image which I believe can be achieved using "object-fit:cover" within css

My code is as follows:

<div class="row" id="test-row">
    <div class="col-2" id="test-left">
        Some random text
    </div>
    <div class="col-10" id="test-right">
        <img src="img_source" class="img-responsive">
    </div>
</div>

I have looked online and at other posts but all seem to be based around the column not needing to be cropped or downsized.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Daniel Wood
  • 67
  • 9
  • Related? - https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings – Paulie_D Sep 03 '19 at 14:11

1 Answers1

1

This is possible if you are willing to make your image a background image.

<style>
     #bg-image {
        background-image: url('example.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
     }
</style>
<div class="row" id="test-row">
    <div class="col-2" id="test-left">
            Some random text
    </div>
    <div class="col-10" id="test-right">
        <div id="bg-image"></div>
    </div>
</div>

Otherwise use a javascript window resize event to set the height.

Clinton Schram
  • 76
  • 3