根據圖像大小調整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%; 
}