Jquery 使总缩略图高度等于大图像高度

我有四张图片，我正在创建一个画廊。其中一个图像以全尺寸显示，而其他三个图像只是裁剪的缩略图

我想知道是否有办法使三个缩略图的总高度等于我最大图像的高度

看到我的问题了吗

<div class="gallery">
    <ul class="thumbs">
        <li class="thumb">
            <a href="#"><img src="1.jpg"></a>
        </li>
        <li class="thumb">
            <a href="#"><img src="2.jpg"></a>
        </li>
        <li class="thumb">
            <a href="#"><img src="3.jpg"></a>
        </li>
        <li class="thumb">
            <a href="#"><img src="4.jpg"></a>
        </li>
    </ul>
</div>

我在想这可能是一些JS可以解决的解决方案

我已经在这里启动并运行了一个演示：

我将非常感谢您的帮助。提前感谢。

更改您的css代码：

---

您可以使用js使其动态化，但这将实现jab

您可以在没有js的情况下实现它

虽然，如果你可以使用奇怪的选择器和样式覆盖，但是我想如果你有更多的自由来改变你当前的HTML，这是可以改变的

这是提琴，以防万一：

编辑

更简单一点，通过添加更多的类

HTML:

更新的小提琴

进一步信息

计算

填充底部
拇指侧边栏的值

根据代码-图像大小为800x1029

在主图像旁边排列3个图像意味着每个边栏图像高度必须为
1029/3=343px
high，即每个边栏图像大小必须为
800x343

现在，由于整个部分将是流体（除非另有说明），流体填充底部应为
（343[侧栏图像高度]/1600[整个缩略图部分宽度为800*2]）*100[百分比]
，即
21.4375%

注意：与其做数学运算，不如打开开发者工具栏，修改底部的填充值，直到得到所需的结果。
更改当前HTML并不是最糟糕的事情。您建议这样做吗？很抱歉，更改标记意味着添加更多的表示类，这将减少兄弟选择器
.thumb+.thumb
等的使用。无论如何，使用新的fiddle（）更新我的答案-chearsthat
height:0黑客工作出伟大！你能告诉我你是如何在Firebug中生成这些百分比的吗？谢谢接受答案。嘿，伙计，只是普通的萤火虫->检查任何
.thumb侧边栏
->样式选项卡->摆弄
填充底部
，直到你得到想要的结果。更新了我的答案，包括有关数学的详细信息
<ul class="thumbs">
    <li class="thumb thumb-hero">
        <a href="#"><img src="http://f.cl.ly/items/0c0G0A3P1k0Q2C3F2D2j/1.jpg" /></a>
    </li>
    <li class="thumb thumb-sidebar">
        <a href="#"><img src="http://f.cl.ly/items/1f3F3L0A1U40213T2v2S/2.jpg" /></a>
    </li>
    <li class="thumb thumb-sidebar">
        <a href="#"><img src="http://f.cl.ly/items/0L0B0p0Y0U2L163S400r/3.jpg" /></a>
    </li>
    <li class="thumb thumb-sidebar">
        <a href="#"><img src="http://f.cl.ly/items/0r1G3Z432A0Y2r0w2X0f/4.jpg" /></a>
    </li>
</ul>

.thumbs {
    overflow:hidden;
    position:relative;
    width:800px;
    max-width:100%;
    margin:0 auto;
}

.thumb-hero {
    float:right;
    width:50%;    
}

.thumb-sidebar {
    float:left;
    width:50%;
    height:0;
    padding-bottom:21.5%; /*firebuged it*/
    position:relative;
    overflow:hidden;
}

.thumb-sidebar img {
    position:absolute;
    top:0;
    left:0;
}