将图像定位在相对于彼此的响应包装中

Question

我有一张大约600像素宽的图像，以及几张较小的图像（每张超过100像素），我需要将图像置于较大图像的中心位置。交易是，我需要将它们全部放在一个包装器中，因为我需要它们相对于彼此进行缩放，而不是在窗口大小缩小时重叠。现在，较小的图像根据调整大小而移动，因此它们不会相对于较大的图像保持在适当的位置。它们也没有相对定位，因为当我这样做时，css定心不再有效。

这可能是一种更简单的方式。我希望这些图片一起放在一个以浏览器屏幕为中心的div中，这样图片就会响应并保持相对于彼此相同的位置/大小。 div是相对于屏幕的，相对于div的图片。在div内部是顶部的大图像，下面排列着4个较小的图像。

我想另一种说法就是我想要它们所有的功能，就像它们只是一个图像一样，但我需要将它们分开，因为我需要单独为它们设置动画。

http://codepen.io/kathryncrawford/pen/bVyeyL

<div id="wrapper">
  <img id="logo" class="img-responsive copy" srcset="http://www.fillmurray.com/600/600"></img>

  <div id="wrapperSig">
    <img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
    <img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
    <img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
    <img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
  </div>
</div>

.copy{
opacity: 1;
position: absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}

#wrapper {
position: absolute;
margin: auto;
top:0;
right:0;
bottom:0;
left:0;
}

#logo {
position: absolute;
}

#wrapperSig {
display: inline;
position: absolute;
width: 420px;
margin: auto;
top:60%;
right:0;
bottom:0;
left:0;
}

.signature {
opacity: 1;
display: inline !important;
position: relative;
}