html - 使用宽度使两列相等

Question

我得到了三张照片，它们排列成两列:

• 左列包含 1 张照片，这是一张肖像(宽度 < 高度)
• 右列包含 2 张尺寸完全相同的风景照片(宽度 > 高度)

我想让两列的高度相等，比如左列的高度等于右列的高度。

由于我无法裁剪照片，我必须使用列的宽度使它们等高(这意味着它们不是 50%/50%)。

你可以在这里看到一个例子:

<div class="container">
  <div class="left">
    <img src="https://placehold.it/400x900" alt="">
  </div>
  <div class="right">
    <img src="https://placehold.it/500x400" alt="">
    <img src="https://placehold.it/500x400" alt="">
  </div>
</div>

以及关联的 CSS:

img {
  margin-bottom: 16px;
  max-width: 100%
}

.container {
  width: 700px; /* Container width is fixed */
  display: flex;
}

.left {
   width: 52%; /* I want to change this */
   margin-right: 16px;
}

.right {
  display: flex;
  flex-grow: 1;
  flex-direction: column
}

实例:https://jsfiddle.net/9f2gom0q/

目前，我找到的唯一解决方案是手动固定其中一列的宽度，这听起来不错，但如果照片发生变化，可能会破坏网格。

是否存在基于 flex 的解决方案？

Answer 1

这可以使用 CSS 网格来完成:

img {
  max-width: 100%
}

.container {
  max-width: 700px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  grid-gap: 16px;
}

.left {
  grid-row: span 2;
  height: 100%;
  
  animation:h 10s  infinite;
}


/* A hack to force the correct rendring*/
@keyframes h{
 from {
  height:99.9%;
 }
}

<div class="container">
  <img class="left" src="https://placehold.it/400x900" alt="">
  <img src="https://placehold.it/500x400" alt="">
  <img src="https://placehold.it/500x400" alt="">
</div>