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

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

这是我在jsFiddle中的html来保存帖子长度：jsFiddle

我基本上希望页面看起来像这样：

图像高度也随浏览器窗口缩放。

任何帮助将不胜感激！谢谢！

Answer 1

CSS3添加了一个background-size属性，允许您指定希望背景覆盖其容器：

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

如果您正在寻找向后兼容的解决方案，请考虑不使用背景图像来指定图像，但请使用实际标记，然后将其上的尺寸设置为100％。