Html 如何将动态图像放置在静态帧（图像）内？

考虑一个中心有一个矩形的图像…我需要在矩形内放置另一个完全动态的图像…它应该在调整大小时将其纵横比完美地调整到父图像…请分享您的想法…谢谢。。。。。 设计链接：

到目前为止我的代码

HTML:

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

.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%);
}