使用固定装订线和父级填充在DIV上保留宽高比

Question

Haven在很长一段时间里都没有问过这件事。我试图建立我的设计组合，因为我不是一个真正的前端开发人员，我缺乏很多知识，但这就是为什么我在这里:)）

我有一个带有给定填充的DIV容器。在里面，我将有一个由流体宽度卡组成的网格。在调整父元素大小时，保留卡片纵横比（方形）和卡片之间的装订线是最佳选择，或者如何继续？

简单地说，我正在寻找附加图像之类的东西：

因此，无论屏幕尺寸如何，当卡片改变宽度以填充空间时，装订线和衬垫将保持不变。

我正在寻找尽可能纯净的CSS。我应该在哪里看？

谢谢！

Answer 1

你可以使用boostrap https://jsfiddle.net/2Lzo9vfc/60/来做到这一点 的 HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 portfolio-item">
            <img src="http://placehold.it/350x350" class="img-responsive" alt="">
        </div>
        <div class="col-sm-4 portfolio-item">
            <img src="http://placehold.it/350x350" class="img-responsive" alt="">
        </div>
        <div class="col-sm-4 portfolio-item">
            <img src="http://placehold.it/350x350" class="img-responsive" alt="">
        </div>
    </div>
        <div class="row">
        <div class="col-sm-4 portfolio-item">
            <img src="http://placehold.it/350x350" class="img-responsive" alt="">
        </div>
        <div class="col-sm-4 portfolio-item">
            <img src="http://placehold.it/350x350" class="img-responsive" alt="">
        </div>
        <div class="col-sm-4 portfolio-item">
            <img src="http://placehold.it/350x350" class="img-responsive" alt="">
        </div>
    </div>
</div>

<强> CSS

.portfolio-item {
    margin: 20px 0;
}

@media(max-width: 768px) {
    .portfolio-item {
        margin: 20px auto;
        width: 100%;
        text-align: center;
    }

    .portfolio-item img{
        margin: 0 auto;
    }

}

Answer 2

我不确定我是否做对了。 Nenad的解决方案似乎很好。但我明白卡片总是连续保持3个并不重要的是屏幕的大小（如果这在每个屏幕上都有意义，那么现在是另一个问题）。我让你成为一个小提琴，你不必使用图片，你只需要包含一些JQuery代码，它并不多。

var divWidth = $('.square').width(); 

$('.square').height(divWidth);

请在此处查看我的小提琴：https://jsfiddle.net/ee128fy2/

对于较小的屏幕，将其编辑成连续3个正方形是没有问题的。

请注意，调整浏览器窗口大小时方形高度不会更改，它会在页面加载时更改。但无论如何，我认为当用手机或其他东西看时，没有人会调整窗口大小。

编辑： 如果您使用图片而不是jquery，则在缩放浏览器窗口时，resize将正常工作。