动态调整大小的图像，相对/绝对定位？

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％。