Problem
假设我们有一个具有给定宽度和高度的垂直（即 flex-direction：column）Flexbox 容器。 Flexbox 包含 div，每个 div 包含一个图像。
- 所有 div 和图像都应该以相同的百分比收缩/增长以填充 Flexbox 的高度，这是通过使用 flex-shrink 和/或 flex-grow 来实现的。
- 所有图像都应该保持其纵横比（即不拉伸），这是通过未设置其 css“宽度”属性来实现的。
- 每个 div 应该与它内部的图像具有相同的宽度，我希望通过“width: min-content”或“width: max-content”或“width: fit-content”来实现，但是这个不起作用.
第三点如何实现呢？
注意：它似乎可以在 Flexbox 之外工作。
Example
在下面的示例中，当 id 为“imagecontainer”的 div 的高度缩小到低于 flex-basis 时，即使其内容宽度减小，也不会减小其宽度。
然而，在 Flexbox 外部拥有相同的 div 可以在通过高度限制强制其子图像变小时正确地减小其宽度。
如何使 Flexbox 中的“图像容器”div 随图像缩放其宽度（以便第一个示例中的红色 div 与第三个示例中的红色 div 具有相同的大小）？
Image in flex container with limited height
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start;">
<div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content;">
<img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>
</div>
Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />
<br />
Image in just a simple div with limited height
<div style="position: relative; height: 110px; border: 1px solid red; width: min-content;">
<img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>
Edit:
根据下面的答案之一，这个版本可以解决 Chrome 上的问题，但不适用于 Firefox。与上面的示例相比，使其工作的唯一显着变化是在“imagecontainer”div 上添加“height: 100%”。
Image in flex container with limited height
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start;">
<div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 120px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; height: 100%;">
<img src="https://via.placeholder.com/120.png" style="max-height: 120px; height: 100%;" />
</div>
<div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: fit-content; height: 100%;">
<img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>
</div>
Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />
<br />
Image in just a simple div with limited height
<div style="position: relative; height: 110px; border: 1px solid red; width: min-content;">
<img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>
编辑解决方案：
根据接受的答案，上面示例的解决方案是这样的（根据否则为柔性基础的值计算高度百分比）：
Image in flex container with limited height
<div style="border: 1px solid black; height: 110px; width: 200px;">
<div id="imagecontainer" style="box-sizing: border-box; border: 1px solid red;height: calc(100% / (270 / 120)); width: max-content;">
<img src="https://via.placeholder.com/120.png" style="height: 100%;" />
</div>
<div id="imagecontainer" style="box-sizing: border-box; border: 1px solid red;height: calc(100% / (270 / 150)); width: max-content;">
<img src="https://via.placeholder.com/150.png" style="height: 100%;" />
</div>
</div>
请注意，这不再需要 Flexbox。
如果你设置max-height: calc(100% / (total height / own height)) and height: 100% for #imagecontainer它也适用于 Firefox。相关答案
Image in flex container with limited height
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start; ">
<div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 120px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; max-height: calc(100% / (270 / 120));height: 100%;">
<img src="https://via.placeholder.com/120.png" style=" height: 100%;" />
</div>
<div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: fit-content; max-height: calc(100% / (270 / 150));height: 100%;">
<img src="https://via.placeholder.com/150.png" style=" height: 100%;" />
</div>
</div>
Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />
<br />
Image in just a simple div with limited height
<div style="position: relative; height: 110px; border: 1px solid red; width: min-content;">
<img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>
如果flex容器中有3个元素：
Image in flex container with limited height
<div style="display: flex; flex-direction: column; border: 1px solid black; height: 110px; width: 200px; align-items: flex-start;">
<div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 120px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; max-height: calc(100% / (420 / 120)); height: 100%;">
<img src="https://via.placeholder.com/120.png" style=" height: 100%;" />
</div>
<div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; max-height: calc(100% / (420 / 150));height: 100%;">
<img src="https://via.placeholder.com/150.png" style=" height: 100%;" />
</div>
<div id="imagecontainer" style="position: relative; flex-shrink: 1; flex-basis: 150px; min-height: 0; box-sizing: border-box; border: 1px solid red; width: min-content; max-height: calc(100% / (420 / 150));height: 100%;">
<img src="https://via.placeholder.com/150.png" style=" height: 100%;" />
</div>
</div>
Original image<br />
<img src="https://via.placeholder.com/150.png" style="border: 1px solid black;" />
<br />
Image in just a simple div with limited height
<div style="position: relative; height: 110px; border: 1px solid red; width: min-content;">
<img src="https://via.placeholder.com/150.png" style="max-height: 150px; height: 100%;" />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
