Javascript 删除对象拟合上的填充：包含（图像缩放布局）

我将简要描述这个问题（我对div使用了不同的颜色）：

这是我目前的布局情况：

当我垂直调整浏览器窗口大小时，会发生以下情况：

我的html代码是：

  <div class="wrap-container">         <!-- Yellow container-->
    <div class="wrap">                 <!-- Grey container-->
      <div class="image">              <!-- Aqua container-->
        <img src="images/me.png"/>     <!-- Red container-->
      </div>
   </div>
 </div>

我希望水族箱与图像缩放（因此永远不会看到红色），如下图所示：

---

提前感谢！：）

您提供的代码不会重新创建所显示的条件，但实现所需条件的最简单方法是更改

对象匹配：contain到<代码>对象匹配：封面

我已经尽力重新创建了您的条件，并进行了一些编辑以简化控件

image类上的
justify:flex end
没有任何好处，height%的值对您不利，因此我将其替换为padding


.wrap容器{
背景颜色：黄色；
显示器：flex；
证明内容：中心；
宽度：100%；
}
.包裹{
背景：灰色；
显示器：flex；
宽度：100%；
最大宽度：450像素；
}
.形象{
背景：水；
垫面：10%；
宽度：50%；
显示器：flex；
弯曲方向：立柱；
}
img{
背景：红色；
对象匹配：覆盖；
对象位置：中心；
最大高度：300px；
}


.wrap-container{
  background-color: yellow;
}

.wrap{
  background: grey;
  display: flex;
  justify-content: flex-start;
}

.image-container{
  height: 100%;
  background: aqua;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  img{
    height: 80%;
    object-fit: contain;
    object-position: left;
    background: red;
    max-width: 368px; /* the original width of the image */
    max-height: 332px; /* the original height of the image */
 }
}