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我可以这样做。

我不知道答案是基础特定还是CSS通用。要么这样做，只要它在Foundation网格中有效。

Answer 1

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

在此处阅读更多内容：http://foundation.zurb.com/docs/components/equalizer.html

Answer 2

问题是你的背景图像div没有高度或宽度或内容。

.medium-6将提供宽度（以百分比表示），但不是高度。如果你想让background-image div与“一堆文本”div具有相同的高度，你应该使用Zurb Block Grid，它类似但使用display: inline-block;，所以每个兄弟都继承了最大的高度。 / p>

您还可以在display: table-cell上使用display: table-row对“一堆文字”和“背景图片”以及.row进行操作。

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

2 个答案: