Javascript 使图像占据100%的高度，但不是100%的高度（缩小时保持图像尺寸不变）

编辑：多亏了minitech，它比以前工作得更近了。我使用“封面”作为背景尺寸，放大/缩小时不再调整大小（如所希望的那样），但现在图像也太大了。这有什么办法吗

再次感谢

原职：

我正在制作一个网站，我希望左边的一栏是一个图像，它占据了用户浏览它的分辨率的100%高度和30%宽度。此外，如果它们放大/缩小，我希望图像能够调整大小，以便它仍然保持浏览器的完整高度

我尝试使用以下javascript以像素为单位设置包含div的宽度/高度，然后用百分比调整其余部分：

document.write（“”）

它不像我预期的那样工作（没有重新调整尺寸），或者比我测试过的几种浏览器/分辨率（尤其是iPad）的观看高度高，或者短

该网站是

非常感谢您的帮助

谢谢
您可能可以使用绝对定位：

#容器{
底部：0；
位置：绝对位置；
排名：0；
宽度：30%；
}

很可能您不需要任何JavaScript，只需要使用
后台附件：修复用于左栏

查看此工作演示：

以下是此示例的HTML：

<div id="wrapper">
    <div id="left-col">
    </div>
    <div id="right-col">
        <p>Random text and content that would be needed goes here</p>
    </div>
</div>​

​

背景定位不用居中-居中-居中可以随意使用固定像素，但不管浏览器的宽度或大小，“居中”将保持照片居中，而“居中”将始终显示顶部-如果您始终希望显示图像的中间，可以使用“居中”。你可以玩这个，但在理想情况下，我想你会一直让她的脸露出来。
100%的身高。。。但不是100%的高度？看到了吗？这个想法是利用这样一个事实，即当值是一个百分比时，高度和宽度的填充测量值总是相对于元素宽度进行计算。如果我试图放大图像以阅读从多到小的文本，那么强迫宽度为100%会让我在手机上发疯。
#wrapper {height:100%; width:100%;}

#left-col {
    background: url("http://www.lesliecampbellweddings.com/images/brideAndGroom.jpg") top center fixed no-repeat;
    width:50%;
    height:900px;
    float:left;
}

#right-col {
    background: yellow; /* so you can see it*/
    width:50%;
    height:900px;
    float:left;
}