在容器

Question

我试图创建一个字符选择容器，当单击相应的按钮时，字符的图片会显示在矩形容器中。我目前在点击按钮时会显示图像，但是我无法正确缩放图像并在容器内适当裁剪。

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>

CSS：

#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
}