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

Posted 2023-03-28

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

【英文标题】：Create a div with text and image scaled to fit remaining space?

【发布时间】：2018-04-10 21:48:40

【问题描述】：

我想要一个包含文本的 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 的某种组合。我可能会弄明白，但这个问题有足够多有趣的东西和主要概念，我认为值得发布，而且我在这个网站上的任何地方都看不到它们。

【问题讨论】：

您应该发布足够的代码来重现该问题。包括图片。

【参考方案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>

【讨论】：

谢谢！做到了。实际上问题是我的身高比我想象的要高，而且我隐藏了滚动条，所以我没有注意到。感谢您解释 flex 属性。我希望这篇文章对某人有所帮助，因为它是我能找到的最好的方法。看起来 align-items:stretch 可能适用于 img 元素，但我之前没有注意到。