图像弹性项目不会在弹性框中缩小高度

Posted 2023-03-05

技术标签:

【中文标题】图像弹性项目不会在弹性框中缩小高度【英文标题】：Image flex item does not shrink height in a flexbox 【发布时间】：2019-09-01 22:39:46 【问题描述】：

我有一个包含 img 弹性项目的弹性容器。

我希望 img 忽略其固有高度 (90px)，以便高度可以缩小以匹配兄弟的弹性项目高度（按照默认的 align-items: stretch 样式）。

.container 
    border: 1px solid;
    display: flex;


.item 
    border: 1px solid;


.content 
    width: 200px;
    height: 50px;
    background-color: hotPink;

<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

如果我们将img 换成div，我们可以看到所需的行为：

.container 
    border: 1px solid;
    display: flex;


.item 
    border: 1px solid;


.dynamicHeightContent 
    width: 120px;
    height: 100%;
    background-color: green;


.content 
    width: 200px;
    height: 50px;
    background-color: hotPink;

<div class="container">
    <div class="item">
        <div class="dynamicHeightContent"></div>
    </div>
    <div class="item">
        <div class="content"></div>
    </div>
</div>

我在img 上尝试过min-height: 0，但无济于事。

适用于img 但不适用于div 的特殊行为是什么？我们如何选择退出img 的特殊行为，使其表现得像其他弹性项目（例如div）？如果无法选择退出，是否有推荐的解决方法？

请注意，虽然img 不会缩小其高度，但它确实会增长：

.container 
    border: 1px solid;
    display: flex;


.item 
    border: 1px solid;


.content 
    width: 200px;
    height: 300px;
    background-color: hotPink;

<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

注意：我很乐意忽略img 的纵横比。我打算避免通过object-fit: cover 扭曲img。

【问题讨论】：

将图像包裹在div 中，看看有什么不同... 哦，我看到图像不会缩小超过 90px 的原始高度，这是有道理的，因为这是 flex 项目的内容。 【参考方案1】：

请注意，在您的示例中，item 是 flex 项 而不是 content - 您应该在此处检查 item 的 strech 行为。

我们如何选择退出 img 的特殊行为，使其表现得像其他弹性项目（例如 div）？

它的行为类似于其他 flex 项目 - <img> 作为 flex 项目可能不是很有用，但拉伸行为可以正常工作：

如果图像的高度大于item，则item 拉伸到图像的高度如果图像的高度小于item，则图像拉伸到content 的高度，从而打破其纵横比。

请看下面的演示：

.container 
  border: 1px solid;
  display: flex;


.item 
  background: cadetblue;


.content 
  width: 200px;
  background-color: hotPink;


img 
  display: block;

<h2>Small content</h2>
<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
  <div class="item">
    <div class="content">some text here some text here some text here </div>
  </div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
  <div class="item">
    <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
  </div>
</div>

我在img 上尝试过min-height: 0，但无济于事。

min-height: 0 被赋予沿 flex 方向 的 column flexbox 以覆盖默认的 auto 行为（对于 row方向属性是min-width) - 这在交叉轴中不起作用。

您可以在下面查看详细信息和一些示例：

Flexbox affects overflow-wrap behavior

Flexbox resize and scrollable overflow

Why don't flex items shrink past content size?

在容器中包装图像

现在将<img> 包装在一个 div 中并查看相同的情况 - stretch 行为再次良好：

.container 
  border: 1px solid;
  display: flex;


.item 
  background: cadetblue;


.content 
  width: 200px;
  background-color: hotPink;


img 
  display: block;

<h2>Small content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here </div>
  </div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
  </div>
</div>

现在的不同是你现在可以在图像上成功使用object-fit（如果它是一个flex item，这将无法正常工作）：

.container 
  border: 1px solid;
  display: flex;


.item 
  background: cadetblue;


.content 
  width: 200px;
  background-color: hotPink;


img 
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

<h2>Small content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here </div>
  </div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
  </div>
</div>

我希望这个 img 忽略其固有高度 (90px)，以便高度可能会缩小以匹配兄弟的弹性项目高度

忽略图像高度的唯一方法是在图像包装器上使用定位：

相对于其包装器绝对定位图像，您可以为图像包装器指定一个宽度，也可以在item 上指定flex: 1 以获得水平可用宽度的一半。

请看下面的演示：

.container 
  border: 1px solid;
  display: flex;


.item 
  background: cadetblue;
  flex: 1; /* equal width for items */


.content 
  width: 200px;
  background-color: hotPink;


.item:first-child  /* image container */
  position: relative;


img 
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; /* position absolutely */
  top: 0;
  left: 0;

<h2>Small content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here </div>
  </div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
  </div>
</div>

【讨论】：

有道理，谢谢。很遗憾position: absolute 技巧是必要的。我怀疑这将是开发人员遇到的常见问题。感觉就像我们需要一种添加到 CSS 中的声明性方式来执行此操作，因此我们不必求助于这些 hack。我会关注这个问题得到多少关注:-)【参考方案2】：

我认为你看错了。

图片本身是 90px 高，这意味着 flex item 的内容有 90px 的高度（因为你的图片是 flex item）。因此，右侧的 div 与图像高度匹配，因为它高于 div 的高度，而不是相反。

把它想象成你已经将弹性项目（图像）的高度设置为 90 像素。因此，除非您将其设置为较小的高度，否则它不会缩小通过它。即使您没有将图像高度显式设置为 90px，但它自然是 90px，因此它是隐式设置的，这会导致混淆。因此，虽然它的高度会延伸到 90px 以上，但它不会低于它，因为那是弹性项目内容的高度。

如果你将它换成一个 div 并且它像你想象的那样工作，是因为在 .item div 上没有设置高度，这是 flex 项。

【讨论】：

这是有道理的，但我希望有一种方法可以忽略图像的固有大小/高度，例如min-height: 0。另外，推荐的解决方法是什么？这是一个非常常见的用例。再一次，图像的尺寸作为弹性项目的内容，把图像想象成一个文本块，这个文本占据了 90px 的空间高度。如果你想让它更小，你必须设置一个高度。图片的问题是它是一个 90px 高的实心块，就像一个 90px 高的字母一样，所以它不能缩小到比这更短，因为这是它可以走的最小的尺寸这是一种很好的观察方式。但是当你使用object-fit 时，图像可以在任何高度工作。出于这个原因，CSS 有一些机制来忽略固有高度可能是有意义的。我希望解释是有道理的，这是我能从逻辑上解释的唯一方法【参考方案3】：

虽然这不是您要问的答案，但 div 和 img 实际上表现相同，即如果内容高于高度，它会增加高度

示例：

.container 
    border: 1px solid;
    display: flex;


.item 
    border: 1px solid;


.dynamicHeightContent 
    width: 120px;
    height: 100%;
    background-color: green;


.content 
    width: 200px;
    height: 50px;
    background-color: hotPink;

<div class="container">
    <div class="item">
        <div class="dynamicHeightContent">
        akhsdjahskd<br>
        ajkhsdkjhasd<br>
        ajshdkahsd<br>
        ajsgdjgad<br>
        ajshdasjdh<br>
        </div>
    </div>
    <div class="item">
        <div class="content"></div>
    </div>
</div>

既然你坚持object-fit应该解决它，你可以试试这个，如你所见，object-fit只有在我们设置高度和宽度的情况下才有效，否则浏览器会尝试使其“保持纵横比” ，只需尝试从 css 中删除高度或宽度（一次一个），您将看到此效果

.container 
    border: 1px solid;
    display: flex;


.item 
    border: 1px solid;


img.item 
    height: 50px;
    width: 200px;
    object-fit: cover;


.content 
    width: 200px;
    height: 50px;
    background-color: hotPink;

<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

【讨论】：

以上是关于图像弹性项目不会在弹性框中缩小高度的主要内容，如果未能解决你的问题，请参考以下文章

如何在不给定高度的情况下使内容在弹性框中可滚动？

将弹性项目保留在父容器内