如何使两个div高度相同，其中一个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更适合此任务？如果是，请问我该如何做？

提前感谢！

- Dalen

---

行高是如何选择的？它是固定的，还是应该是正方形图像的自然高度或矩形图像的自然高度或... - A Haworth

Answer 1

使用以下代码针对.image-large进行修复：

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

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

- noiseymur