Html 在一个容器中覆盖多个不同大小的PNG图像

我正在尝试创建一个角色选择容器，当单击相应的按钮时，角色的图片将显示在一个矩形容器中。我目前有图像显示时，按钮被点击，但我有困难，使图像的比例适当，并在容器内适当裁剪

PNG图像的大小大致相同，但我可能需要修改图像。现在我很乐意让他们呆在集装箱里

HTML:

<section id="team-bar">
<img id="pos1" src="img1src.png">
<img id="pos2" src="img2src.png">
<img id="pos3" src="img3src.png">
<img id="pos4" src="img4src.png">
<img id="pos5" src="img5src.png">
</section>

#team-bar
{
  display: inline-block;
  height: 300px;
  width: auto;
  position: relative;

  img
   {
    width: auto;
    height: 300px;
   }
}

#pos1
{
  position: absolute;
  left: 100px;
  z-index: 0
}
#pos2
{
  position: absolute;
  left: 500px;
  z-index: 1
}
#pos3
{
  position: absolute;
  left: 900px;
  z-index: 2
 }
#pos4
{
  position: absolute;
  left: 1300px;
  z-index: 3
}
#pos5
{
  position: absolute;
  left: 1700px;
  z-index: 4
}