0

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

再次感谢。

...

原帖：

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

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

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

它不像我预期的那样工作（没有重新调整尺寸），并且比我测试过的几个浏览器/分辨率（尤其是在 iPad 上）上的查看高度更高或更短。

该网站是http://lesliecampbellweddings.com/。

任何帮助是极大的赞赏！

谢谢

4

2 回答 2

0

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

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

这是一个演示。

于 2012-11-07T15:47:41.573 回答
0

很可能您不需要任何 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;
}

​</p>

可以随意使用固定像素来代替 center top 作为背景定位，但是 center 将使照片保持居中，尽管浏览器的宽度或大小如何，并且 top 将使其始终显示顶部 - 如果你总是使用 center center 你可以使用想要显示图像的中间。你可以玩这个，但理想情况下，我假设你会一直保持她的脸。

于 2012-11-07T20:50:59.333 回答