CSS: 縦横比を維持したレスポンシブな外枠に画像をフィットさせたい

以下のような、.img-wrapper は縦横比3:4を維持してレスポンシブな外枠、
その中の画像を外枠にフィットさせたい場合は以下のようにします。


<div class="img-wrapper">
<img src="photo.jpg" class="object-fit-img" />
</div>



.img-wrapper {
position: relative;
width: 100%;
}

.img-wrapper:before {
content:"";
display: block;
padding-top: 75%; // 3÷4×100です。
}

.img-wrapper img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}


補足
IE10/11とEdgeでは、object-fit: cover; が効かないそうなので、
object-fit-images (ofi.js) を利用します。その場合CSSは

.img-wrapper img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;' //これを追加
}

object-fit-images (ofi.js) の使い方は以下を参照
https://www.webcreatorbox.com/tech/object-fit