html - 如何在 flexbox 中获取具有外部高度和内部宽度的 div

Question

问题

假设我们有一个具有给定宽度和高度的垂直(即 flex-direction: column)flexbox 容器。 flexbox 包含 div，每个 div 包含一个图像。

• 所有 div 和图像都应该按相同百分比收缩/增长以填充 flexbox 的高度，这是通过使用 flex-shrink 和/或 flex-grow 实现的。
• 所有图像都应保持其纵横比(即不拉伸(stretch))，这是通过不设置其 css“宽度”属性来实现的。
• 每个 div 应该具有与其内部图像相同的宽度，我希望通过“width: min-content”或“width: max-content”或“width: fit-content”来实现，但这不起作用。

第三点如何实现？

注意:它似乎在 flexbox 之外工作。

例子

在下面的示例中，当其高度缩小到 flex-basis 以下时，id 为“imagecontainer”的 div 不会减小其宽度，即使其内容的宽度减小了。 但是，在 flexbox 外部具有相同的 div 会使它在通过高度限制强制其子图像变小时正确地减小其宽度。

如何使 flexbox 中的“imagecontainer”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>

编辑:

根据以下答案之一，此版本解决了 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>

编辑解决方案:

根据已接受的答案，上述示例的解决方案是这样的(根据原本作为 flex 基础的值计算高度百分比):

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。

Answer 1

如果为 #imagecontainer 设置 max-height: calc(100%/(total height/own height)) 和 height: 100% code> 它也适用于 Firefox。 Related answer

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>