Constraing image size within a flex item

[NickPearson]

Hi,

I’m having a bit of a headache trying to constrain the size of an image inside a flex item.

Without further ado: http://codepen.io/nckprsn/pen/VYVoyv?editors=110

In Firefox: the width of the link (blue border) is stuck at the real pixel width of the image.

In Chrome: the width of the link gets stuck at the pixel width of the image upon first render of the page. The pixel width of the link remains the same when the viewport is resized.

The image itself could be made to fit with far less markup but the intended application will require another element to be wrapped around it (blue border in the pen).

I have tried the other usual methods for centering the image and its wrapper but all so far seem to prevent the image from keeping its aspect ratio and/or max dimensions.

I’m stumped – any suggestions would be most welcome!

[NickPearson]

Had another shot at this, this is the next iteration: http://codepen.io/nckprsn/pen/raPybo?editors=110

Not quite what I was hoping for but a few media queries should sort out the remaining issues.

[Author]

Posts