网格/图像布局问题基础4 - 这可能吗？

Question

我一直试图为投资组合的主页获得如下布局;

Here is the working example:

正如你所看到的，我不是一个伟大的程序员：

HTML

<div class="row">
<div class="large-11 small-12 small-centered columns">

<div class="large-3 small-3 columns test tall-thin">
<div class="inner"><p>Tall Thin Image</p></div></div>

<div class="large-9 small-9 columns test long-thin">
<div class="inner"><p>Long Thin Image</p></div></div>

<div class="large-3 small-3 columns test short-fat">
<div class="inner"><p>Short Fat Image</p></div></div>

<div class="large-3 small-3 columns test short-fat">
<div class="inner"><p>Short Fat Image</p></div></div>

<div class="large-3 small-3 columns test short-fat">
<div class="inner"><p>Short Fat Image</p></div></div>

<div class="large-6 small-6 columns test short-medium">
<div class="inner"><p>Short Medium Image</p></div></div>

<div class="large-6 small-6 columns test short-medium">
<div class="inner"><p>Short Medium Image</p></div></div>
</div>
</div>

CSS

.test { border:1px solid #666;}

.tall-thin{ height: 470px;}
.long-thin{ height: 235px;}
.short-fat{ height: 235px;}
.short-medium{ height: 235px;}

.inner {
    background:#f8f8f8;
    margin: auto;
    position: absolute;
    top: 10px; left:10px; bottom: 10px; right:10px;

}

.inner p{
    position: relative;
    text-align: center;
    }

我在使用同位素或砖石没有运气之后在基础4中做到了这一点，并且它对于一个分辨率（1920px）工作正常但是在调整大小时它是流动的但是因为高度需要指定为它没有的div。 t scale。

当我将图像作为背景或src放置时，它似乎会添加边距，然后只注意图像宽度以进行缩放。我知道这是由于基础，但我不确定如何解决这个问题。

我的问题是我猜最好的方法？这甚至可以使用带图像的基础网格吗？我不需要过滤或动态布局，因为我想要为首页创建的网格模式。我可以设置投资组合页面，因为它只有一个相等的方格，不会引起同位素的任何布局问题。

我基本上希望将此作为布局并使其具有响应性，以便在768px以下时盒子是全宽的。

我感谢任何人的观看或任何建议！

谢谢，

杰森

Answer 1

我通过创建媒体查询解决了这个问题，例如;

@media all and (min-width: 1201px) and (max-width:1400px) {

.tall-thin{ height: 450px;}
.long-thin{ height: 225px;}
.short-fat{ height: 225px;}
.short-medium{ height: 225px;}

}

结合HTML中的图像;

style="background-image:url(path to image); background-size:cover;"

我提出了10个查询，所以它非常防弹。最小的媒体查询只使DIVS跨度达到100％，因此图像占据了整个列。砌体，同位素，Mason.js，Freetile等在没有愚蠢空隙的情况下无法做到这种布局。虽然我的代码并不漂亮，但没人能回答，所以这是我能做的最好的。