ブラウザで画像のサイズを変更すると隙間が表示される

Question

自分のウェブサイトのモバイル版に50-50の画像/テキスト形式の小さなセクションがありますが、ブラウザのサイズを変更すると、画像の下部。

私はすべてを試しましたが、問題を理解することができませんでした（私はそれが何か微妙なものであると確信しています）。私が一番近かったのは画像にvertical-align: bottom;だったが、その隙間はちょうどその先頭に現れ始めた。

.mobilecontainer1 { 
 
    display: block; 
 
    width: 100%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
.mobilebox { 
 
    float: left; 
 
    width: 50%; 
 
    overflow: hidden; 
 
    line-height: 0; 
 
} 
 

 
.mobilebox img { 
 
    width: 100%; 
 
} 
 

 
.mobiletextwrap { 
 
    padding-top: 19%; 
 
} 
 

 
#mobilebox1 { 
 
    background: black; 
 
    color: white; 
 
} 
 

 
#mobilebox2 { 
 
    background-color: white; 
 
    color: black; 
 
} 
 

 
#mobilebox3 { 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
.mobileboxwrap { 
 
    width: 100%; 
 
    float: left; 
 
    display: block; 
 
} 
 

 
#mobileboxwrap1 { 
 
    background: black; 
 
    color: white; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#mobileboxwrap2 { 
 
    background: white; 
 
    color: black; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#mobileboxwrap3 { 
 
    background: black; 
 
    color: white; 
 
    height: 100%; 
 
    overflow: hidden; 
 
}

<div class="mobileboxwrap" id="mobileboxwrap1"> 
 
    <div class="mobilebox"> 
 
    <img src="img/mobilebackground_3.png"> 
 
    </div> 
 
    <div class="mobilebox" id="mobilebox1"> 
 
    <div class="mobiletextwrap"> 
 
     <header> 
 
     <h2>Info</h2> 
 
     </header> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="mobileboxwrap" id="mobileboxwrap2"> 
 
    <div class="mobilebox" id="mobilebox2"> 
 
    <div class="mobiletextwrap"> 
 
     <header> 
 
     <h2>Drinks</h2> 
 
     </header> 
 
    </div> 
 
    </div> 
 
    <div class="mobilebox"> 
 
    <img src="img/mobilebackground_2.png"> 
 
    </div> 
 
</div> 
 
<div class="mobileboxwrap" id="mobileboxwrap3"> 
 
    <div class="mobilebox"> 
 
    <img src="img/mobilebackground_1.png"> 
 
    </div> 
 
    <div class="mobilebox" id="mobilebox3"> 
 
    <div class="mobiletextwrap"> 
 
     <header> 
 
     <h2>Music</h2> 
 
     </header> 
 
    </div> 
 
    </div>

Answer 1

だけ表示を設定します。IMGためのブロック

.mobilebox img { width: 100%; display: block;}