Изменение размера изображения в div с другими элементами

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 используйте div с изображением в качестве фона и flex: 1.

.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;
}