创建一个带有缩放文本和图像以适应剩余空间的div？

Question

我想要一个包含文本的 div 和一个自动缩放的图像，以适应文本在 div 中没有占据的剩余空间。我得出的结论是，缩放 img 元素的最常见方法是通过 max-height/max-width 样式。但该值是相对于父元素的，根据设计，我不会知道它的空间大小。

因此，在自动缩放的 div 上使用“背景图像”样式似乎是要走的路。 Flex-box 似乎也是要走的路。

HTML：

<div class="item">
    <div class="item-img" style="background-image:url('images/piano.jpg')"/>
    <div class="item-desc"> A Piano.  This text will break it if too long</div>
</div>

CSS：

.item {
display: flex;
flex-direction: column;
height: 100vh;
}
.item-img {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
flex: 1;
}
.item-desc {
flex: 1;
}

除非描述文本太长，否则这很好用。然后，由于某种原因，图像分隔线不会缩小为文本腾出空间。我看到了有关使用“object-fit”的解决方案，但我认为必须有一个 flex-box 解决方案。似乎答案应该是 flex-shrink 和 flex-grow 的某种组合。我可能会弄明白，但这个问题有足够多有趣的东西和主要概念，我认为值得发布，而且我在这个网站上的任何地方都看不到它们。

Answer 1

我希望 div 自动包含文本和图像 缩放以适应文本未占据的剩余空间 分区。

为此，image div 需要为 flex: 1，因此它会增长并占用可用空间，并且 text div 应该具有默认为flex: 0 1 auto，表示不增长（0），允许缩小（1），按内容调整大小（自动）。

堆栈sn-p

body { margin: 0; }

.item {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.item-img {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: 1;
}

.item-desc {
}

<div class="item">
  <div class="item-img" style="background-image:url(http://placehold.it/400)"></div>
  
  <div class="item-desc">
    An image. This text will break it if too long. 
    An image. This text will break it if too long. 
    An image. This text will break it if too long. 
    An image. This text will break it if too long. 
    An image. This text will break it if too long. 
  </div>
</div>