调整 div 的高度，使其内容填充 100% 宽度答案

【问题标题】：Resize height of div so that its contents fill 100% width调整 div 的高度，使其内容填充 100% 宽度
【发布时间】：2020-04-10 22:19:40
【问题描述】：

我有一个 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%;
}

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

标签： css

【解决方案1】：

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

【讨论】：

感谢您的回答，但这不是我想要的。图像宽度应该是 33.33。他们应该放大直到它们都具有相同的高度，然后它们三个的宽度加起来应该放大到 100vw。这意味着它们各自的宽度不是 33.33，因为它们具有不同的纵横比。