如何使图片的最大高度等于包含文本的同级图片？

Question

I have the following 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>

I want the image inside the div with class post-img not to exceed the hight of the div with class content .

I tried:

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

}

but the image exceed the other div .

Answer 1

You can achieve the effect you want with combination of flex and absolute positioning

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