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

【问题标题】：How can I make two divs the same height where one of them has to keep a square aspect ratio?如何使两个 div 具有相同的高度，其中一个必须保持方形纵横比？
【发布时间】：2021-11-08 21:15:05
【问题描述】：

我正在创建一个响应式图像网格。每行有两个图像——一个矩形和一个正方形——并且每一行的布局都是相反的（squarerectangle -> rectanglesquare，等等）。

目前，我正在使用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 更好吗？如果是这样，我将如何去做？

提前致谢！

【问题讨论】：

行高如何选择？是固定的，是正方形图片的自然高度还是矩形图片的自然高度还是...

标签： html css flexbox image-gallery aspect-ratio

【解决方案1】：

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

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

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

【讨论】：