Image to fill parent div and stay in proportion

[grimski]

I tagged this on to the end of another topic but I thought it’d be best if it had it’s own thread.

Basically I have 2 ‘columns’ side-by-side, both 50% in width. On column has an inline image, the other mainly text. I’ve tried to use flexbox to ensure they both have the same height.

The problem I’m having is when the text becomes larger than the image a gap is displayed around the image as it scales down. You can see this on this CodePen (you’ll need to scale the width of your browser down to see it happen):

https://codepen.io/moy/pen/jaQPqP

So I need to find a way for the image to always fill that block and stay in proportion. It’s worth noting I need to support IE11+ and the rest of the modern browsers/devices.

I tried flex-shrink set on the img along with min-width: 100%; min-height: 100%; which seemed to work at first but I noticed the image was squashed/stretched to fill the space which isn’t ideal.

I then tried object-fit: cover; which again looks like it did the job but it’s lack of browser support means it’s probably a no-go for me.

Can anyone help with this issue?

Another more general question I have is in regards to my flexbox CSS. Is it ok? I had some problems with it so I wondered if I’d overcomplicated it a bit.

I tried to use this markup/CSS on another similar section, except one column had a CSS set background image and the text needed to be aligned to the bottom. I thought I had it working at first but when I cross-browser tested I noticed the CSS set background image was centred in the column along with the text, which meant the column wasn’t 100% tall.

I think I’ve since fixed this but I had to declare flexbox again on the child elements. I wonder if that’s a bit OTT or if it is the only away to achieve the layout I’m after. Here’s an example of that…

https://codepen.io/moy/pen/dZQgVK

Thanks, hope someone can shed some light on these two issue!

[Author]

Posts