我相信你需要设置一个指定的高度而不是auto.http://jsfiddle.net/BN4Ny/这样做是一个平滑的扩展。虽然不确定你是否想要那个小的关闭打开效果。我只是把你的jsfiddle分叉并添加了一个指定的高度。

这种解决方案不需要JavaScript，也不存在事先需要为容器设置固定高度的问题。
这可以通过使用max-height属性并将其值设置为较高的值来实现。

#imgs {
    border:1px solid #000;
    border-radius:3px;
    max-height:20px;
    width:100%;
    overflow:hidden;
    transition: 2s ease;
}
#imgs:hover {
    max-height:15em;
}

<div id="imgs">

  <img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" />
</div>

不要在容器上使用设置高度或使用JS（这两种解决方案都很笨拙）...您可以将图像放在列表项中，然后在li上进行转换。
如果所有的图片都有相似的高度，这意味着容器中的内容仍然是动态的。

/*
CLOSED
*/

div.container li 

{  height:0px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

/*
OPEN
*/

div.container:hover li 

{  height:30px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

下面是您可以如何做到这一点：http://jsfiddle.net/minitech/hTzt4/
不幸的是，为了保持灵活的高度，JavaScript是必需的。

我用的是这个方法使用最大高度来过渡高度，而不是直接使用高度...例如：

div {
     height: auto;
     max-height:0;
 }

   .toggle-above-div:hover div {
    max-height:0;
  }