html - グリッド/画像レイアウトの問題基礎 4 - これは可能ですか?

Question

ポートフォリオのホームとして、次のようなレイアウトを取得しようとしています。

これが実際の例です：

ご覧のとおり、私は優れたコーダーではありません。

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;
    }

同位体や石積みを使用して運がなかった後、Foundation 4でこれを行いました.1つの解像度（1920px）では問題なく動作しますが、サイズ変更すると流動的ですが、divの高さを指定する必要があるため、まったくスケーリングしません.

画像を背景または src として配置すると、余白が追加され、スケーリングのために画像の幅のみが通知されるようです。それがファンデーションによるものであることは知っていますが、それを修正する方法がわかりません。

私の質問は、最善のアプローチだと思いますか? これは、画像付きの基礎グリッドを使用しても可能ですか? フロントページ用に作成したグリッドモードが必要なので、フィルタリングや動的レイアウトは必要ありません。同位体でレイアウトの問題を引き起こさない等しい正方形のグリッドを持つポートフォリオ ページをセットアップしても問題ありません。

私は基本的に、これをレイアウトとして使用し、768px 未満のボックスが全幅になるようにレスポンシブにしたいと考えています。

見てくれたり、提案をしてくれた人に感謝します！

ありがとう、

ジェイソン