根据图像大小调整div大小

I am new to CSS and HTML and got the following problem. I created a banner that holds an image and resizes accordingly to the screen size. Now, I want my content underneath to resize according to the image. The content in this case is a table. When I decrease the screen size, the table moves up(padding decreases) and when I increase the screen size, the content moves down. This is probably because the image size changes. Do you know how I can resize the table accordingly?

我是CSS和HTML的新手,遇到了以下问题。我创建了一个横幅,用于保存图像并根据屏幕大小调整大小。现在,我希望我的内容根据图像调整大小。这种情况下的内容是一个表。当我减小屏幕尺寸时,桌子向上移动(填充减少),当我增加屏幕尺寸时,内容向下移动。这可能是因为图像尺寸发生了变化。你知道我怎么能相应调整桌面的大小吗?

Here is the HTML code

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

And the CSS Code /* table */

和CSS代码/ *表* /

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

/*resize container */

/ *调整容器大小* /

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

}

/* resize images */

/ *调整图像大小* /

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

Thank you

1 个解决方案

#1

The table is moving up and down because the padding is a percentage, and the image shrinks as it resizes. This is natural to see the content move down as the browser resizes.

该表正在上下移动,因为填充是一个百分比,并且图像在调整大小时会缩小。在浏览器调整大小时,可以自然地看到内容向下移动。

Your image does not need to be absolute positioned, and will create space for itself. Does this help? See my code here:

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

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

#1