html - 垂直调整图像以适应文本

Question

我有一段文字和一张图片。这些必须适应我定义高度的 parent ，例如 100px

文本必须填写它需要的内容。它可以是一个简单的短语，也可以是一个长段，为此我无法定义一个固定的高度。

用剩余的空间，我想放一个img，但是当我放的时候，图像占用了原始img的高度大小。你可以在这里看到我的代码片段:

.parent{
   height: 100px;
   width: 100%;
   padding: 10px;
   display: flex;
   flex-flow: column;
}
.parent img {
  flex: 1 1 auto;
}
.parent .textContainer{
  flex: 0 1 auto;
}

<div class="parent">
    <img src="https://via.placeholder.com/250x250"/>
    <div class="textContainer">Text or html here</div>
</div>

基本上，发生的事情是图像采用基本图像的高度，也就是说，如果图像的高度为 700px，则它的高度为 700px 并且它离开 div，将自身定位为就好像它位于绝对(它不是 )。

Answer 1

如果我正确理解您的问题，在这种情况下我要做的是设置最大宽度和高度，然后在图像中添加宽度:100%.. 例如

<div class="parent">
    <img class="image-style" src="https://via.placeholder.com/250x250"/>
    <div class="textContainer">Text or html here</div>
</div>

.parent{
   height: 100px;
   width: calc(100% - 20px);
   padding: 10px;
   display: flex;
   flex-flow: column;
}

.image-style{
  width: 100%;
  height:100%;
  //add more styles if you want
}