如何使图像最大高度等于其包含文本的兄弟？答案

【问题标题】：How to make image max height equal to its sibling that contains a text?如何使图像最大高度等于其包含文本的兄弟？
【发布时间】：2018-02-11 11:22:57
【问题描述】：

我有以下html：

<div class="container">
    <div class="post">
        <div class="row">
            <div class="col-md-6 content">
                <p>
                     //Text From Json File
                </p>
            </div>
            <div class="col-md-6 post-img">
                <img src='http://placehold.it/1000/200' />
            </div>
        </div>
    </div>  
</div>

我希望 post-img 类的 div 内的图像不超过 content 类的 div 的高度。

我试过了：

.post 
{
    display:table;
    width:100%;
}
.post .row
{
    display:table-row;
}
.post .row > div
{
    display: table-cell;

}

但图像超过了另一个 div。

【问题讨论】：

您的包含类内容的 div 没有定义任何高度。请先更改您的 CSS。
那是因为里面的文字是动态变化的，所以取了内容高度

标签： javascript jquery html css

【解决方案1】：

结合flex和绝对定位可以达到你想要的效果

.container {
  display: flex;
  justify-content: stretch;
}

.text {
  width: 50%;
}

.image {
  // this is so that the .image has any height 
  padding-bottom: 1px;
  position: relative; 
  width: 50%;
}

.image img {
  position: absolute;
  max-height: 100%;
  left: 0
}

<div class="container">

  <div class="text">
    Sed nec libero urna. Proin laoreet molestie turpis. Nullam elementum molestie viverra. Praesent sit amet leo eget libero dapibus efficitur. Fusce pulvinar est massa, vel vestibulum velit consectetur vitae. Nam at dolor libero. Fusce eleifend nisl quis
    vehicula ultrices. estie turpis.
    tur.i
  </div>

  <div class="image">
    <img src="http://via.placeholder.com/350x150">
  </div>

</div>

【讨论】：