如何使两个 div 具有相同的高度，其中一个必须保持正方形纵横比？

Question

我正在创建响应式图像网格。每行有两个图像——一个矩形和一个正方形——每行的布局都是相反的（square rectangle -> rectangle square，依此类推）。

目前，我正在使用 height: 0; padding-bottom: 100% 使正方形 div 保持其比例，而矩形 div 得到 height: 100%; padding-bottom: 0;。它工作得很好，直到画廊中的最后一张图片是一个矩形 div 在它自己的行上。 height: 100%; 不再有任何高度可以使用，所以它最终完全没有高度。

我在这个 CodePen 中重现了我的问题：https://codepen.io/Dalen_K/pen/GRvdEjp

如何确保最后一个 div 保持与旁边有一个正方形（最好没有 JS）时相同的高度？网格会比 flexbox 更好吗？如果是这样，我将如何去做？

提前致谢！

Answer 1

将此用于 .image-large，它将得到修复：

&.image-large {
    height: 0;
    padding-bottom: calc(50% - 12px);
  }

原因是列高是根据内容高度或同一行中最高列的大小决定的。（我的意思是该列所在的可见行，而不是 row 标记）。由于您的 col-4 列的内容具有高度（由填充提供），因此另一个列会自动与它相同。然而，在最后一行，该列没有可继承的参考高度，这就是为什么其中的图像不能超过 50px 高度（设置为最小值）的原因。我所做的是以类似于您为较小图像赋予高度的方式为大列中的图像赋予高度。（由于列之间有 24 像素的间隙，所以有额外的 12 像素，这就是我减去它的原因）

如何使两个 div 具有相同的高度，其中一个必须保持正方形纵横比？

How can I make two divs the same height where one of them has to keep a square aspect ratio?

html

css

flexbox

image-gallery

aspect-ratio