html - 根据图片大小调整div

Question

我是 CSS 和 HTML 的新手，遇到了以下问题。我创建了一个包含图像并根据屏幕大小调整大小的横幅。现在，我希望我下面的内容根据图像调整大小。本例中的内容是一个表格。当我减小屏幕尺寸时，表格向上移动(填充减小)，当我增加屏幕尺寸时，内容向下移动。这可能是因为图像大小发生了变化。您知道我如何相应地调整表格的大小吗？

这是HTML代码

<div class= "resize">
    <%=link_to image_tag("header.png"), "#" %>
  </div>
<div class="table-container">
<h3>Latest 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>

和 CSS 代码/* 表格 */

.table-container {
  padding-top: 45%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 500px;
}

/*调整容器大小*/

  .resize {
   position: absolute;
   left: 0;
   right: 0;
    margin-top: 80px;
     padding-bottom: 80px;
    background-size: 100%;

}

/*调整图片大小*/

.resize img {
    width: 100%;
    height: 100%;
}

谢谢

Answer 1

表格上下移动，因为填充是百分比，并且图像在调整大小时缩小。当浏览器调整大小时，看到内容向下移动是很自然的。

您的图像不需要绝对定位，并且会为自己创造空间。这有帮助吗？在这里查看我的代码:

http://jsfiddle.net/38Gba/

.table-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 500px;
}
.resize {
    margin-top: 80px;
    padding-bottom: 80px;

}
.resize img {
    width: 100%;
    height: 100%;
}