Question

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

所以使用＆＃34;背景图像＆＃34;自动缩放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;
}

除非说明文字太长，否则此工作正常。然后，由于某种原因，图像分割器不会缩小以为文本腾出空间。我看到了关于使用＆＃34; object-fit＆＃34;的解决方案。但我认为必须有一个灵活的解决方案。似乎答案应该是flex-shrink和flex-grow的某种组合。我可能会想出来，但这个问题有足够的有趣的东西和我认为值得发布的主要概念，而且我不会在这个网站的任何地方看到它们一体化。

Answer 1

我想要一个div来自动包含文本和图像缩放以适应文本没有占据的剩余空间格。

要实现这一点， image div 需要flex: 1，因此它会增长并占用可用空间，而 text div 应该有默认值，即flex: 0 1 auto，表示不增长（0），允许缩小（1），按内容调整大小（自动）

Stack snippet

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>

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

1 个答案: