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

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，那么可以改变

以下是小提琴：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;
}

更新小提琴 http://jsfiddle.net/Varinder/8tH7L/2/

更多信息

计算padding-bottom

的.thumb-sidebar值

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

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

现在因为整个部分将是流动的（除非另有说明），流体填充底部应该是( 343 [ sidebar image height ] / 1600 [ whole thumbnail section width which is 800 * 2 ] ) * 100 [ percentage ]并且来到21.4375%

注意：而不是进行数学计算，它更容易弹出开放式开发人员工具栏并提取填充底部值，直到获得所需结果

Answer 2

更改您的css代码：http://codepen.io/anon/pen/JIAhG

你可以使用js使它动态化，但这将做jab