February 08, 2016

Quick tip: A method to retain proportional image resize when using flexbox

I've never been a fan of floating or absolute positioning as I find they can introduce other issues. Flexbox is a dream nowadays to arrange content around other content. While working within a responsive layout I needed my image to resize proportionally if the browser was resized while sitting beside some text. 

I found that when using Flexbox in the way I have I needed a little workaround to make sure the image resized proportionally. Up until this point the image took the full height of the parent element and would only resize horizontally.

I'm sure there may be others but here's a little workaround if anyone else comes up against the same issue:

In a nutshell, wrap your image inside it's own <div> and allow the image sitting within the wrapper div to flow by default.

Click here for example on JSFiddle