當在瀏覽器中調整圖像大小時出現差距

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;}