在具有固定间距和父填充的 DIV 上保留纵横比

Question

好久没来这里提问了。我正在尝试构建我的设计作品集，但由于我不是真正的前端开发人员，所以我缺乏很多知识，但这就是我来这里的原因:)

我有一个 DIV 具有给定填充的容器。在里面，我将有一个由可变宽度卡片组成的网格。在调整父元素大小时保留卡片纵横比（正方形）和卡片之间的间距的最佳选择是什么，或者如何继续这样做？

简而言之，我正在寻找类似附图的内容：

因此，无论屏幕尺寸如何，装订线和内边距都将保持不变，而卡片会更改宽度以填满 space。

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

谢谢！

Answer 1

您可以使用 bootstrap 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 张（如果这在每个屏幕上都有意义，现在是另一个问题）。我给你做了一个fiddle，不用图片，你只需要包含一点JQuery代码，不多。

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

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

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

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

请注意，当您调整浏览器大小时，方形高度不会改变 window，它会在页面加载时改变。但无论如何，我认为没有人会在移动 phone 或其他设备上查看时调整 window 的大小。

编辑：如果您使用图片而不是 jquery，调整大小将在缩放浏览器时实时工作 window。

在具有固定间距和父填充的 DIV 上保留纵横比

Retaining Aspect Ratio on DIVs with Fixed Gutter and Parent Padding

html

css

grid

width

fluid