如何在Flexbox中获得具有外部高度和固有宽度的div [英] How to get a div with extrinsic height and intrinsic width inside a flexbox

问题描述

假设我们有一个具有指定宽度和高度的垂直（即flex-direction：列）flexbox容器。 flexbox包含div，每个div包含一个图像。

Say we have a vertical (i.e. flex-direction: column) flexbox container with a given width and height. The flexbox contains divs and each div contains an image.

• 所有div和图像均应按相同的百分比收缩/增长以填充flexbox的高度


• 所有图像都应保持其长宽比（即不拉伸），这是通过将其CSS保持为 ; width


• 每个div应该与其中的图像具有相同的宽度，我希望可以通过 width：min-content来实现。或 width：max-content或 width：fit-content，但此不起作用。

• All divs and images are supposed to shrink/grow by the same percentage to fill the height of the flexbox, which is achieved by using flex-shrink and/or flex-grow.
• All images are supposed to keep their aspect ratio (i.e. no stretching), which is achieved by leaving their css "width" attribute unset.
• Each div is supposed to have the same width as the image that's inside of it, which I expected to achieve with "width: min-content" or "width: max-content" or "width: fit-content", but this does not work.

如何实现第三点？

注意：它似乎在flexbox之外起作用。

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

In the example below the div with id "imagecontainer" does not reduce its width when its height is shrunk below flex-basis, even though its content reduces in width. However, having the same div outside of a flexbox makes it reduce its width correctly when it forces its child image to become smaller through height constraints.

我如何制作 ; imagecontainer flexbox中的div随图像缩放其宽度（以便第一个示例中的红色div与第三个示例中的红色div具有相同的大小）？

How do I make the "imagecontainer" div in the flexbox scale its width with the image (so that the red div in the first example has the same size as the red div in the third example)?

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。为了使它起作用，与上面的示例相比，唯一的重大变化是添加 height：100％。在图像容器上div。

Based on one of the answers below, this is a version that solves the problem on Chrome but doesn't work on Firefox. The only significant change from the example above to make it work was to add "height: 100%" on the "imagecontainer" 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: 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-basis的值计算高度百分比）：

Based on the accepted answer the solution for the example above is this (calculating height percentages based on the values that would otherwise be the flex-basis):

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 ％/（总高度/自身高度））和高度：<％c $ c> #imagecontainer >它也可以在Firefox上使用。 相关答案

If you set max-height: calc(100% / (total height / own height)) and height: 100% for #imagecontainer it will work on Firefox also. 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个元素：

If there are 3 elements in flex container:

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>

这篇关于如何在Flexbox中获得具有外部高度和固有宽度的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！