How to make an image proportionally smaller when using flexbox?

Question

css

Here is an example on codepen . I have styles written in Less, so there is also less. But this should not complicate the task.
Here's the page I'm working on. There, the picture has width: auto and it does not scale at all.
In general, if you reduce the window, then the picture, when it stops fitting into the block, will decrease, everything is as it should. Only the height will not change. If you do not use flexboxes, then everything is ok, the pictures always decrease proportionally. But here I need flexboxes.
Thank you for your time.

Answer 1

I only see the option to wrap <img>in some kind of container, for semantics it could be <picture>. Scaling <img>is kind of magical, it doesn't work with most other elements, so I don't think it will work directly. I love pretty solutions, but that doesn't seem to be the case.