Question

我有一个div，其中包含图片和可变数量的文本，这些文本可能构成0、1或多行。如何调整图像的大小，以使两个元素的总和不超过父div的高度？

在下面的示例中，图像占据了div的整个高度（30vh），而文本div则在下面。我希望图像占用尽可能多的空间，因此，如果文本有0行，它将占据整个div，并且仅调整大小足以使文本适合父div。

#test {
  height: 30vh;
  width: 50%;
}

img {
  max-height: 100%;
  object-fit: cover;
}

<div id="test">
  <img src="..."><br />
  <div>Variable amount of text</div>
</div>

我正在使用Bootstrap 4，如果该功能具有简化操作的功能。

Answer 1

容器（.test应该是flexbox列）。代替img，使用以图片为背景和flex: 1的div。

.test {
  display: flex;
  flex-direction: column;
  height: 30vh;
  width: 50%;
}

.img {
  flex: 1;
  background: url(https://picsum.photos/id/464/200/300) no-repeat;
  background-size: contain;
}

<div class="test">
  <div class="img"></div>
  <div>Variable amount of text</div>
</div>

<div class="test">
  <div class="img"></div>
  <div>Variable amount of text Variable amount of text Variable amount of text Variable amount of text</div>
</div>

Answer 2

尝试这样

div#test img {
    max-height: 100%;
    object-fit: cover;
}

用其他元素调整div中图像的大小

2 个答案: