Question

您好我想获得与示例相同的行大小的图像，但是您可以看到，当您更改窗口大小时，较大的图像小于左侧的列。我和它打了很长时间，仍然没有找到解决方案。我需要使用叠加文本。所以这是另一个问题。谢谢你的任何sugestions http://jsfiddle.net/sLk0jf4L/264/

<div class="row" data-equalizer>
<div class="small-3 columns col-left" data-equalizer-watch>
    <div class="row">
        <div class="small-12 columns">
            <img src="http://placehold.it/600x300" /> 
            <img src="http://placehold.it/600x300" /> 
        </div>
    </div>
</div>
    <div class="small-3 columns col-left" data-equalizer-watch>
    <div class="row">
        <div class="small-12 columns">
            <img src="http://placehold.it/600x300" /> 
            <img src="http://placehold.it/600x300" /> 
        </div>
    </div>
</div>
<div class="small-3 columns" data-equalizer-watch>
     <img src="http://placehold.it/600x645" /> 
</div>
<div class="small-3 columns" data-equalizer-watch>
 <img src="http://placehold.it/600x645" /> 
</div>
</div>

Answer 1

问题来自填充

.col-left img:last-child {
    padding-top:1em;
}

调整窗口大小时，只调整块的大小，保持顶部填充

我建议在那里使用一个百分比，在这个特殊情况下，8％似乎可以解决这个问题

.col-left img:last-child {
    padding-top:8%;
}

在同一级别上具有不同大小的响应图像

1 个答案: