Question

我在div中有一个背景图片。我选择了一个背景图片，因为我想要一个搜索栏放在它上面。无论如何，在背景图像下，作为标题，我放了一张桌子。标题根据屏幕宽度调整大小。表格宽度相同。但是，当屏幕尺寸减小时，标题和表格之间的距离会增加。有谁知道为什么会发生这种情况以及如何解决这个问题？这是我的HTML

    <div class= "resize">
    </div>
<div class="table-container">
<h3>Latest Job Postings</h3>
<table class = "table table-striped table-bordered table-centered">
  <tr>
    <th class="description">Description</th>
    <th class="location">Location</th>
  </tr>
  <td>[description]</td>
  <td>[Location]</td>
</table>
</div>
</div>
</div>

My CSS
/*resize container */
  .resize{
    background-image: url("header.png");
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: 80px;
    height: 350px;   
}

/* table */
.table-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 500px;
}


th.description {
  width: 80%;
}

th.location {
  width: 10%;
  }

Answer 1

请尝试以下方法：

演示：jsFiddle

问题在于您为标题部分设置了background-size:100%，这将导致两者根据宽度调整背景图片的宽度和高度。

因此，当您调整窗口大小时，背景图像的宽度会发生变化，高度也会相应地发生变化。并且由于容器具有固定的高度，当背景图像的高度减小时，它将在其下方产生间隙。

我所做的是将background-size属性更改为

background-size: 100% 350px;

这将使背景图像的高度保持不变，宽度将响应容器宽度的变化。

根据图像调整表格大小

1 个答案: