调整div的高度，使其内容填充100％的宽度

Question

我有一个div，其中包含三个图像（纵横比各不相同）。假设image1为16：9，image2为4：3，image3为1：1。

我希望所有图像都具有相同的高度，因此我将其高度设置为100％，宽度设置为自动。

现在，我想按比例放大整个div，以使其占用容器的100％，在我的情况下为100vw。

目标是div的高度相应地增加，以便div中的图像也相应地增加，因此最后我有一排3张图像，每张图像占100vw，并且所有图像都具有相同的高度。

问题是我无法使它正常工作。当我给div设置一个固定的高度时，图像会适当地放大，但是我想反过来，所以div的高度是灵活的，并且图像的高度会放大，直到整行填充100％ div的容器。

有人可以帮忙吗？`

我所拥有的：

.gallerygroup3 {
    height: 500px;  /* <-- Works widht a fixed height, but not with 100% or anything else */
    width: 100vw;
}

#gallery img {
    width: auto;
    height: 100%;
}

Answer 1

尝试将width : auto;中的#gallery img更改为width : 33.33vw（因为有3张图片），然后尝试更改div的高度，它应该可以工作。希望这可以帮助！ ：D