Как сделать отзывчивую версию прозрачной внутренней рамки картинки?

Question

[Ivaseg]

Нужно сделать картинку с разными бордерами (верх и по бокам одинаковые размеры, низ в 3 раза больше). Для картинки явно не задаются размеры, чтобы в мобильной версии браузер смог пропорционально уменьшить картинку, не сплюснув ее.
Сам бордер такой сделать не проблема: псевдоэлемент и вперед. Но в этом случае нужно указывать размеры для псевдоэлемента, т.е. в мобильной версии уже не получится чтобы и псевдоэлемент пропорционально уменьшился браузером.
Есть идеи как добиться желаемого для десктопа и моб версии?

Answer 1

[nofuture trustnoone]

Ориентироваться на пространство вокруг картинки и, может, для тех боковых взять % , ем, рем варианты

Answer 2

[Stalker_RED]

Можно сохранять пропорции ограничивая размер

img {
    display: block;
    max-width: 240px;
    max-height: 80px;
    width: auto;
    height: auto;
}