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

Question

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

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

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

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

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

谢谢!

Answer 1

我不确定我是否做对了。 Nenad 的解决方案似乎不错。但我知道无论屏幕有多大或多小，卡片始终保持连续 3 张(如果这在每个屏幕上都有意义，现在是另一个问题)。我给你做了一个 fiddle ，你不必在其中使用图片，你只需要包含一点 JQuery 代码，并不多。

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

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

请看我的 fiddle :https://jsfiddle.net/ee128fy2/

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

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

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