css - Zurb Foundation 如何使图像填充网格行中的单元格

Question

我想让图像填充网格行中的一个单元格。我想使用 CSS background-size: cover 属性让它缩放以相应地填充单元格。

例如:

<div class='row'>
    <div class='medium-6 columns'>
        <div style='
        background: url("/img/picture.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;'></div> 
    </div>
    <div class='medium-6 columns'>
        ... bunch of text ...
    </div>
</div>

如何让第一个单元格中的 div 扩展到整个单元格空间？

请注意，我没有使用 img 元素，因为我试图获得 cover 行为。如果有办法使用 img 来做到这一点，我可以改为这样做。

我不知道答案是 Foundation 特定的还是 CSS 通用的。只要它适用于 Foundation 网格，两者都可以。

Answer 1

您可以使用一些数据属性创建等高容器。将 data-equalizer 属性应用于父容器。然后将 data-equalizer-watch 属性应用于您希望具有相同高度的每个元素。 data-equalizer-watch 属性的高度将等于最高元素的高度。

在这里阅读更多:http://foundation.zurb.com/docs/components/equalizer.html