使图像占用高度的100％，但不超过高度的100％(放大时图像相同的尺寸)

Question

编辑：多亏了Minitech，使其工作比以前更近。我使用了"封面"的背景大小，并且在放大/out（希望）放大时不再调整大小，但是现在的图像也太大了。有什么方法可以解决吗？

再次感谢。

...

原始帖子：

我正在制作一个网站，我希望左列是一个占用高度的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%;
}

这是一个演示。

Answer 2

很可能您不需要任何JavaScript，只需要在左列中使用background-attachment:fixed;。

查看此工作演示：http：//jsfiddle.net/ckukt/

这是您的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>​

这是各自的CSS：

#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;
}

而不是背景定位的中心顶部可以随意使用固定像素，但是尽管浏览器的宽度或尺寸，中心将保持照片为中心，而TOP将保持其始终显示顶部 - 您可以使用中心中心如果您始终想要所示图像的中间。您可以玩这个，但理想情况下，我认为您会始终保持她的脸。