テーブルセルの高さ、imgの表示：ブロック

Question

テーブルセルの私の理解は、各テーブルセルの高さが最も高いテーブルセルと同じ高さに拡大することです。しかし、この例では、.col1内のimgがdisplay: blockに設定され、.col2内のテキストが最後まで押し込まれると、.col2の高さは.col1以下になります。 display: blockがimgから削除されている場合は、.col1と.col2がテキストを中央に揃えて整列しています。私の質問は、なぜimgのdisplay: blockは、表セルのレンダリング方法とテキストの配置方法を変更するのですか？差異を確認するにはimgにdisplay: blockを切り替えます。

https://codepen.io/norkuy/pen/EvQQrE

HTML

<div class="row1"> 
    <div class="col1"> 
     <img src="http://lorempixel.com/1000/800/" alt=""> 
</div> 
<div class="col2"> 
    <p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet 
mollitia est maiores temporibus ea, sint ex repellat ipsa eveniet nesciunt. 
</div></p> 
</div> 
</div> 

<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veniam 
praesentium delectus aliquid ea nisi porro eius rem debitis architecto quas, 
hic placeat ratione possimus voluptates perferendis at voluptatibus tenetur! 
</div></p> 

CSS

.col1, .col2 { 
    width: 50%; 
    display: table-cell; 
} 

.col2 { 
    background: black; 
    color: white; 
} 

.row1 { 
    display: table; 
    img { 
    display: block; 
    } 
} 

img { 
    max-width: 100%; 
    width: 100%; 
} 

Answer 1

したい場合は、あなたのtable-cell要素が正常に動作し、あなたの細胞のコンテナがtable-row表示

.table { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.row { 
 
    display: table-row; 
 
} 
 

 
.cell { 
 
    display: table-cell; 
 
    width: 50%; 
 
    vertical-align: middle; 
 
    border-bottom: 1px solid #000; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
    <br/><br/>fdfsf 
 
    </div> 
 
    <div class="cell"> 
 
    dffdsf 
 
    </div> 
 
    </div> 
 
</div>

01を有していなければなりません