Css堆栈图像，同时保持最高的高度

Question

我正在尝试将3个图像堆叠在容器内，以便它们显示在彼此之上。

我的问题是我不知道图像大小，我希望我的容器等于最高的高度。我也不想使用javascript。

这是一个演示预期结果的小提琴，实际上是我的问题的解决方案，但只适用于Chrome！

http://jsfiddle.net/TnVVa/

这是它的html部分：

<div class="container">
  <div class="img-container">
    <img src="firstImage.jpg"/>
    <img src="secondImage.jpg"/>
    <img src="thirdImage.jpg"/>
  </div>

  <div class="text">
    This is my text
  </div>
</div>

我希望在其他浏览器上获得相同的结果（至少firefox和IE10 +，如果更好的话）

作为奖励，将3张图像垂直居中放在容器中会很棒。