我想让一个div包含文本和一个图像，它会自动缩放以适应文本在div中没有占用的剩余空间。我得出的结论是，缩放img元素的最常见方法是通过max-height/max-width样式。但该值是相对于父元素的，并且根据设计，我不会知道它的空间大小。
因此，在自动缩放的div上使用“background-image”样式似乎是一条可行的路，Flex-box也是一条可行的路。
超文本标记语言：

<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的某种组合-我可能会想出来，但这个问题有足够的有趣的事情和主要的概念，我认为这是值得张贴，我没有看到他们在这个网站上的任何地方都在一个。