html - 创建一个文本和图像缩放以适合剩余空间的 div？

Question

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

因此，在自动缩放的 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

I would like a div to contain text and also an image automatically scaled to fit the remaining space that the text did not occupy in the div.

要做到这一点，image div 需要 flex: 1，因此它会增长并占用可用空间，而 text div 应该有默认值，即 flex: 0 1 auto，这意味着，不增长 (0)，允许收缩 (1 )，按内容调整大小(自动)。

堆栈片段

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>