Question

我有以下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>

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

我试过了：

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

}

但是图像超过了另一个div。

Answer 1

您可以通过组合弹性和绝对定位来实现您想要的效果

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

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

1 个答案: