Fit image with height 100% in flex

Question

I have a responsive background image in a div. And i want a two column flex layout on top of it, in which the left layout have image of height 100% of the parent div with width auto scale like responsive image. and the right part is a two line text centering in the flex.

This is the closest i can get so far. But the flex does not stretch to fit the background div image and the left image does not scale accordingly when browser resize.

Note: None of the width and height in px should be specified in the code

.parent {
  display: flex;
  align-items: center;
}

.left {
  height: 100%;
}

.right {
  flex: 1;
  background: blue;
}

  <div style="position: relative;">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTkyfCkzwQ7Lx4v3YRNao0lQgM-VkEj6iLWTHE8KqHF5tk4cl15WQ" style="width: 100%">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
      <div class="parent">
        <div class="left">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRsxhzGxiYQU_vp2YlN1LTMxQsYMhFDqTZLwfqMylCwqIahCu00Mf_0aDQ">
        </div>
        <div class="right">
          <p>
            123
          </p>
          <p>
            456
          </p>
        </div>
      </div>
    </div>
</div>

Expectation:

@Michael_B quite near but unfortunately no. I have created a [jsfiddle] (jsfiddle.net/tgrs0uo4/4) with square image in left column for illustration. as you can see the square image does not maintain the aspect ratio of the image (1:1) inside the flex box — stackdisplay
@Michael_B much closer but still there is something missing. The image do not take up the height of the background image div. Ideally the image height should be the same as the background image div height while maintaining the image own ratio — stackdisplay
Just remove align-items: center from the .left container: jsfiddle.net/tgrs0uo4/6 — Michael Benjamin

Harry Kitchener Harry Kitchener · Accepted Answer · 2016-10-20T14:06:03

Remove align-items: center; from the parent div.

If you want to center align the text elements, use padding or position: relative/position: absolute

Then apply height: 100%; to the image.

Fit image with height 100% in flex

1 Answers