使用固定间距和父填充保留 DIV 的纵横比答案

【问题标题】：Retaining Aspect Ratio on DIVs with Fixed Gutter and Parent Padding使用固定间距和父填充保留 DIV 的纵横比
【发布时间】：2016-02-12 10:51:53
【问题描述】：

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

我有一个容器，它是一个带有给定填充的 DIV。在里面我会有一个由流体宽度卡片组成的网格。在调整父元素大小时，保持卡片纵横比（正方形）和卡片之间的间距的最佳选择是什么，或者如何实现？

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

因此，无论屏幕大小如何，装订线和内边距都将保持不变，而卡片会更改其宽度以填充空间。

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

谢谢！

【问题讨论】：

标签： html css grid width fluid

【解决方案1】：

我不确定我是否做对了。 Nenad 的解决方案似乎很好。但我知道，无论屏幕有多大或多小，卡片总是连续保持 3 张（如果这在每个屏幕上都有意义，现在是另一个问题）。我给你做了一个你不必使用图片的小提琴，你只需要包含一点JQuery Code，它并不多。

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

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

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

对于较小的屏幕，如果没有连续 3 个正方形，则可以编辑它。

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

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

【讨论】：

是的，我希望有一种通过 CSS 实现的简单易行的方法，但我想 jQuery 更简单、更干净 :) 谢谢你让我大开眼界 :)
请阅读我的编辑 :) 当您使用图片而不是我的 Jquery 解决方案时，它也可以在没有 JQuery 的情况下工作，但不知何故我喜欢没有图片的解决方案 :)

【解决方案2】：

您可以使用 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;
    }

}

【讨论】：