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

Question

我的网站移动版中有一小部分图像/文本格式为50-50，其外观和功能都符合我的要求，但是当我调整浏览器大小时，图像底部会出现一个小间隙。

我已经尝试了一切，但无法弄清楚问题（我确信这是一个很小的我正在盯着看）。我最近来的是图片的vertical-align: bottom;，但差距刚刚开始出现在顶部。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需设置img

的display：block

gcc main.c -lm