Question

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

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

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

图像设置为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%;
    }
}

我使用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浏览器宽度时，您可以看到最佳问题。

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

0 个答案: