動態調整大小的圖像，相對/絕對定位？

Question

我有一些嚴重的困難讓我的圖像高度相對於瀏覽器窗口調整大小 - 寬度調整正常，但高度保持不變。我試過身高：100％和身高：自動，以及身高：100vh，但沒有骰子。我敢肯定它是與我的div的佈局方式，這裏是有關CSS：

.main { 
    z-index: 2; 
    width: 100%; 
    top: 0%; 
    height: auto; 
    left: 0%; 
    position: relative; 
    margin-bottom: 300px; 
    overflow: hidden; 
    } 

.container { 
    overflow: auto; 
    } 

.alphaleft { 
    background-color: #fff; 
    left: 0%; 
    top: 0%; 
    width: 50%; 
    height: 1000px; 
    position: relative; 
    padding: 0; 
    margin: 0; 
    z-index: 5; 
    float: left; 
    } 

.alpharight { 
    background-color: #fff; 
    right: 0%; 
    top: 0%; 
    width: 50%; 
    height: 1000px; 
    position: relative; 
    padding: 0; 
    margin: 0; 
    z-index: 5; 
    float: right; 
    } 

.alphaleftimg{ 
    background: url("images/bg.png") no-repeat; 
    background-size: 100%; 
    left: 0%; 
    top: 20%; 
    width: 100%; 
    height: auto; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    z-index: 6; 
    } 

.alpharightimg{ 
    background: url("images/bg2.png") no-repeat; 
    background-size: 100%; 
    left: 0%; 
    top: 20%; 
    width: 100%; 
    height: auto; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    z-index: 6; 
    } 

.floaters { 
    clear: both; 
    } 

，這裏是我的HTML的jsfiddle保存後長度：jsFiddle

我基本上希望頁面看起來像這樣：

與圖像高度也隨瀏覽器窗口縮放。

任何幫助，將不勝感激！謝謝！

Answer 1

CSS3增加了一個背景大小的屬性，允許您指定您希望背景覆蓋其容器：

http://www.w3schools.com/cssref/css3_pr_background-size.asp

如果你正在尋找一個解決方案，向後兼容，不考慮使用背景圖像指定圖像，但使用實際標記，然後將其上的尺寸設置爲100％。