调整兄弟高度与最短的兄弟姐妹相同

Question

我正在尝试为我的投资组合创建一个项目预览，其中行的左侧是图像，右侧是带有项目信息的容器。

理想情况下，随着浏览器窗口的缩小，我希望保持图像的宽高比。这会导致图像的高度缩小，所以我希望右边的容器能够缩小高度以匹配图像。

在下面的CodePen中，我展示了两个实现https://codepen.io/erikbue/pen/wmGewd

1. 图像设置为object-fit：cover，表示宽高比 是受人尊敬的，但它的容器缩小了，因此裁剪了 调整大小时的图像。

   .project-preview {
       flex-basis: 50%;
       flex-shrink: 0;
       overflow: hidden;
       position: relative;
   
       img {
           position: absolute;
           object-fit: cover;
           width: 100%;
           height: 100%;
       }
   }
   

2. 我使用padding-top技巧来维护 图像的宽高比，但随着它的大小调整，容器上的 正确的高度不会改变并超出图像高度。

   .project-preview2 {
       flex-basis: 50%;
       flex-shrink: 0;
       overflow: hidden;
       position: relative;
       padding-top: 680px / 1160px * 100%;
       height: 0;
   
       img {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
       }
   }
   

有没有办法让合适的容器在调整大小时尊重图像的高度？当您调整大小到大约1000px浏览器宽度时，您可以看到最佳问题。