異なる画像サイズを同じサイズに統一してレスポンシブ表示するには

Question

現在は元の画像のアスペクト比を保ったままレスポンシブ表示されるようになっていますが、横長の画像(1920x1080px)と縦長の画像(1080x1920px)をどちらも同じサイズ(1280x720px)に統一してレスポンシブ表示にしたいです。

以下を指定するとブラウザ幅がMAXの時は理想通りになります。

max-width: 1280px;
max-height: 720px;
object-fit: cover;

このままの形でレスポンシブ表示ができればベストなのですが…。

<div class="images-wrap">
<span class="image-wrap">
<a href="">
<img src="" width="1920" height="1080"></a>
</span>
<span class="image-wrap">
<a href="">
<img src="" width="1080" height="1920"></a>
</span>
</div>
}
※プラグインから出力されるコードなので変更できません。

.image-wrap{
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: auto;
}

Answer 1

以下のサイトに載っている方法で画像が入っている親要素のアスペクト比を固定することで解決できました。

ブロック要素の比率を維持しながら可変させる方法