我在让我的图像高度相对于浏览器窗口调整大小时遇到了一些严重的困难——宽度调整得很好,但高度保持不变。我试过 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
我基本上希望页面看起来像这样:
图像高度也随浏览器窗口缩放。
任何帮助,将不胜感激!谢谢!