html - 在浏览器中调整图像大小时出现间隙

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 设置显示: block

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