Question

我正在使用WP和Foundation 6网格进行布局。几天以来，我一直在与这种布局作斗争。问题是图像没有填满100％的空间。请参阅下面的codepen链接和附加的屏幕截图我是基础新手，所以我的语法可能已经关闭了。任何帮助将不胜感激！

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

<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建立了这个。您会注意到一个面板的间隙略大。这与缩小图像后的像素数有关。基本上没有划分空间的方法，因此一个部分的像素更短。您可以尝试将图像调整一两个像素，看看它们是否最终均匀适合。

我还内置了一个简单的媒体查询，它将取消平铺图像并将其显示在一列中。如果那是你想要做的事情。否则，它们会保持平铺并继续缩小。

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

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

基础6嵌套网格，图像不扩展全高

1 个答案: