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