javascript - 使图像占据 100% 的高度，但不是 100% 的高度(并在缩小时保持图像相同的尺寸)

Question

编辑:感谢 minitech，让它比以前更接近工作。我使用“封面”作为背景大小，并且在放大/缩小时不再调整大小(如所希望的那样)，但图像现在也太大了。有什么办法解决这个问题吗？

再次感谢。

...

原帖:

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

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

document.write('<div id="container" style="width: ' + window.innerWidth + 'px; height: ' + window.innerHeight + 'px;">');

它并没有像我预期的那样工作(没有重新调整尺寸)，并且在我测试过的几种浏览器/分辨率(尤其是在 iPad 上)上，它要么高于要么低于观看高度。

站点是http://lesliecampbellweddings.com/ .

非常感谢任何帮助!

谢谢

Answer 1

你或许可以使用绝对定位:

#container {
    bottom: 0;
    position: absolute;
    top: 0;
    width: 30%;
}

Here's a demo.