jquery - 使总缩略图高度等于大图像高度

Question

我有四张图片用于创建图库。一张图片以全尺寸显示，而其他三张图片只是裁剪后的缩略图。

我正在尝试找出是否有办法让三个缩略图的总高度等于我最大图像的高度。

看到我遇到的问题了吗？

<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 可以解决的解决方案。

我在此处启动并运行了一个演示:http://codepen.io/realph/pen/hezKn

如有任何帮助，我将不胜感激。提前致谢。

Answer 1

不用 JS 也能实现。

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

以下是 fiddle 以防万一:http://jsfiddle.net/Varinder/8tH7L/

编辑

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

HTML:

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

CSS:

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

更新 fiddle http://jsfiddle.net/Varinder/8tH7L/2/

更多信息

找出 .thumb-sidebar 的 padding-bottom 值

来自代码 - 图片大小为 800x1029。

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

现在因为整个部分将是流动的(除非另有说明)流动填充底部应该是(343 [侧边栏图像高度]/1600 [整个缩略图部分宽度，即800 * 2])* 100 [百分比] 达到 21.4375%

注意:无需进行数学运算，弹出开发人员工具栏并摆弄填充底部值直到获得所需结果要容易得多