根据 div 内的内容调整图像大小

Question

我有一个带有其他两个元素的父 div，一个包含文本内容，另一个可能包含图片。图片和文字的大小/长度可能会有所不同。我希望父 div 根据内容增长，但只能达到一定的高度。如果有图像，我希望图像增大或缩小以使父 div 达到最大高度。如果没有图像，我希望父 div 缩小以包含文本。图像将通过 JavaScript 添加。我已经在下图中说明了我想要做的事情。

我期待以下代码可以工作，但图像似乎展开得比父 div 大。我已经尝试了一些其他的东西，但我似乎无法让它工作。

Here 是一个代码笔。

<div id="parent">
  <div id="text-body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div id="image">
    <img src="MayOrMayNotContainImg.com">
  </div>
</div>

#parent{
  max-height:400px;
  padding:10px;
  border: 2px solid black;
}
#text-body{
  padding:10px;
  border: 2px solid blue;
}
#image{
  padding:10px;
  border: 2px solid green;
}

任何帮助将不胜感激，提前致谢。

Answer 1

在下面的代码段中，如果图像在那里，我将通过计算 #parent 内的剩余空间使用 jQuery height 动态分配其高度。 （200 - 高度）。因此，无论内容是什么，图像的高度都会在此基础上增加或减少。

$(document).ready(function() {
  $('#img-wrapper').attr('src', 'https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg');
  let height = $('#text-body').outerHeight();
  $('#img-wrapper').height(200 - height - 20);
})

#parent{
  max-height:200px;
  padding:10px;
  border: 2px solid black;
}
#text-body{
  padding:10px;
  border: 2px solid blue;
}
#image{
  padding:10px;
  border: 2px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <div id="text-body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div id="image">
    <img id='img-wrapper' src="MayOrMayNotContainImg.com">
  </div>
</div>