0

我在让我的图像高度相对于浏览器窗口调整大小时遇到​​了一些严重的困难——宽度调整得很好，但高度保持不变。我试过 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

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

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

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

4

1 回答 1

0

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

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

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

于 2013-04-28T05:36:20.493 回答