如何在静态框架（图像）中放置动态图像？

Question

考虑一个图像，该图像的中心有一个矩形...我需要在矩形内部放置另一个动态完美的图像...调整大小时应将其宽高比调整为与父图像完美的比例...请分享您的想法...谢谢... 设计链接：https://drive.google.com/file/d/1ZLDHO94AyU2Faf7ByNAZMqq5Hsne-Gmk/view?usp=sharing

到目前为止我的代码

HTML：

      <img src="/background-frame-img.png" alt="" class="banner" />
      <img class="banner-img-container" id="banner" src="sleeping-baby-img.png" />
    </section> 

CSS：

.relative{
  position: relative;
}
.banner{
  width: 100%;
  height: auto;
}
.banner-img-container{
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: 360px;
    max-width: 560px;
    transform: translate(-47%,-53%);
}