Foundation 6 嵌套网格，图像未展开全高

Question

我正在使用 WP 和 Foundation 6 网格进行布局。几天来我一直在与这种布局作斗争。问题是图像没有填满其 space 的 100%。请参阅下面的代码笔 link 和随附的屏幕截图。我是基础新手，所以我的语法可能不对。任何帮助将不胜感激！

你可以在这里看到我的代码：

https://codepen.io/enigmas2/pen/vgdxZo

<div class="row">
       <div class="row collapse" id="features" data-equalizer="features">    
           <div class="large-5 columns" data-equalizer-watch="features">
            <div class="row collapse">
              <div class="large-12 columns" id="welcome">
              <img src="http://placehold.it/548x227">
              </div>
            </div>
            <div class="row collapse">
              <div class="large-12 columns">
        <img src="http://placehold.it/548x459">
              </div>
            </div>
          </div>
          <div class="large-7 columns" data-equalizer-watch="features">
            <div class="row collapse">
              <div class="large-12 columns">
         <img src="http://placehold.it/812x459">
              </div>
              </div>
              <div class="row collapse">
              <div class="large-6 columns">
          <img src="http://placehold.it/406x227">
              </div>
              <div class="large-6 columns">
          <img src="http://placehold.it/406x227">
              </div>
            </div>
          </div>
        </div><!--end features -->
        </div> <!-- end #inner-content -->

Answer 1

好的，我使用 flexbox 构建了它。您会注意到一个面板的间隙稍大。这与缩小图像后的像素数有关。基本上没有均匀划分 space 的方法，所以一个部分短了一个像素。您可以尝试将图像调整一两个像素，看看它们最终是否均匀。

我还内置了一个简单的媒体查询，它将 un-tile 图像并将它们显示在一列中。如果这是你想做的事情。否则，它们会保持平铺状态并不断缩小。

@media (max-width: 600px) {
    .flex-column, .flex-row{
        display: block;
    }
    img{
        width: 100%;
    }
}

https://codepen.io/anon/pen/ggegzd?editors=1100#0

Foundation 6 嵌套网格，图像未展开全高

Foundation 6 nested grid with images not expanding full height

html

css

jquery

zurb-foundation