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

Question

我在调整图像高度相对于浏览器窗口的大小时遇到​​了一些严重的困难——宽度可以很好地调整大小，但高度保持不变。我尝试过 height: 100% 和 height: auto，以及 height: 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

如果您正在寻找向后兼容的解决方案，请考虑不使用 background-image 来指定图像，而是使用实际标签，然后将其上的尺寸设置为 100%。