jquery - 我图中的额外空间

Question

我在这里遇到了一个问题，我创建了一个比例为 10/1 的图形，它应该与我的 img 完全相同的空间（谁的实际大小是 4000*/400* 因此也是 10/1 的比例）但我有一个额外的空间突然冒出来。

你知道它来自哪里吗？

这是我的代码：http: //jsfiddle.net/2drYk/21/

<figure class="container">                  
    <img class="content" src="http://img7.imageshack.us/img7/6766/sampes.jpg" alt="sample" />
</figure>

* 
{
margin:0; 
padding:0; 
border:0
}

.container
{
    width:100%;
    background:black;
    overflow:hidden;    
}
.content
{
    width:100%
}


var $cont = $('.container .content'),
    init_size = $cont.width()*0.1,
    c =0,
    s = [400,init_size];

$cont.height( init_size );

$cont.click(function(){   
  $(this).stop().animate({height: s[c++%2] });
});

编辑：似乎问题来自我在 jquery 中调用 2 类的事实，但我仍然不知道为什么，比例仍然相同。

Answer 1

默认情况下，图像是内联显示的，并且为每个行高的字符下降保留空间。

http://jsfiddle.net/2drYk/22/

.content {
    display: block;
}