Question

我想创建一个响应式图像网格，这些图像在Bootstrap中始终是平方的。

到目前为止，我得到了这个：Jsfiddle Link

这部分强制元素一直平方：

.frontpage_square {
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}

.frontpage_square img {
    position:absolute;
}

左边较大的方块和右边的九个小方块是正确的，但我无法弄清楚如何在整个高度上展开右边的九个方格。所以基本上他们应该占据左侧更大的正方形的整个高度。

Answer 1

很简单，你没有正确安排你的div。正确使用div可以使用bootstrap。完成后，您可以使用this S.O. question。

使列大小相同

jsfiddle

<div class="row">
    <div class="col-sm-6 panel">

            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>    

    </div>
  <div class="col-sm-6 panel">

        <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4 ">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>  

        <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4 ">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>  

        <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>
       <div class="col-sm-4">
            <a href="#" class="thumbnail">
                <div class="frontpage_square">
                    <img src="" class="img img-responsive full-width" />
                </div>
            </a>
       </div>

</div>

Bootstrap中响应网格的正方形

1 个答案:

jsfiddle