检测风景图像的宽度，然后将肖像高度与检测到的宽度匹配

Question

我有2种图像尺寸：纵向为150x250，横向为相反尺寸-250x150。该站点的概念是在屏幕变小时使这些形状保持相同。当风景图像的宽度变小时，肖像的高度也应变小，并保持形状。

我正在寻找一种方法来检测风景图像的宽度，然后随着屏幕变小，动态更改肖像图像的高度以匹配风景图像的宽度。

下面的代码只是演示屏幕变小时图像如何工作。

我正在考虑一些获取高度和宽度的方法，例如：

$("img").load(function(){
  var height = $(this).height();
  var width = $(this).width();
});

然后通过CSS设置高度和宽度，如下所示：

$('img').css({
   'height' : $width
});

.site {
  max-width: 50%;
  margin: 5% auto;
}

.images {
  display: flex;
}

.image-wrapper {
  margin: 2%;
  padding: 2%;
  width: 250px;
  background-color: lightblue;
}

.image-wrapper img {
  display: block;
  margin: auto;
  max-width: 100%;
  height: auto;
}

<div class="site">
  <div class="images">
    <div class="image-wrapper landscape">
      <img src="https://via.placeholder.com/250x150" alt="">
    </div>

    <div class="image-wrapper portrait">
      <img src="https://via.placeholder.com/150x250" alt="">
    </div>
  </div>
</div>