Как сделать пропорциональное уменьшение картинки при использовании флексбоксов?

Question

[Иван Желудков]

Вот пример на codepen. У меня на Less стили написаны, поэтому там тоже less. Но это не должно усложнить задачу.
Вот страница, над которой работаю. Там у картинки стоит width: auto и она не масштабируется вообще.

В общем если уменьшать окно, то картинка, когда перестанет влезать в блок будет уменьшаться, всё как надо. Только высота изменятся при этом не будет. Если не использовать флекбоксы, то всё ок, картинки всегда пропорционально уменьшаются. Но здесь мне нужны флекбоксы.
Благодарю за уделённое время.

Comments

[Иван Желудков]

В безымянный кинул, всё стало отлично масштабироваться, код не пострадал.

Answer 1

[Назар Мокринский]

Я вижу только вариант обернуть <img> в какой-то контейнер, для семантики это может быть <picture>. Масштабирование <img> это в некотором роде магия, такое не работает с большинством других элементов, так что не думаю, что получится напрямую. Я люблю красивые решения, но, похоже, это не тот случай.

Comments

[Иван Желудков]

В безымянный кинул, всё стало отлично масштабироваться, код не пострадал.