相对高度和宽度,但绝对定位x,y

Question

我有一个巨大的水平滚动网站.以马里奥世界为例.每个"资产"都是绝对的.

我希望项目的大小(高度和宽度)相对于浏览器的视口(因此使用百分比),但需要使用左侧的实际像素来定位项目等.

当我这样做时,显然,当我调整浏览器窗口大小时,资产会正确调整大小.但是项目的位置以像素为单位,因此事物相对于背景移动到不适当的位置.

这个问题有一个简单的CSS解决方案吗？使用百分比来定义位置(左边:例如50%)并不是一个很好的解决方案,因为它不是很准确(参见下面的jsfiddle).或者我应该使用JS查看resize事件并以这种方式执行某些操作？如果是这样,怎么样？

我不确定我现在是否有意义..如果有任何问题,请告诉我.

编辑

这是一个JSFiddle:http://jsfiddle.net/BZ77t/

请注意,在调整窗口大小时,黑色块(#blockpx)使用像素定位,因此在调整大小时不会受到影响.#blockpercentage然而,红色块()的大小和位置使用百分比来实现我想要的效果:坚持预期的位置(这是背景图像的位置).然而,它并不准确 - 在这个例子中并不重要,但在更大的设置(更宽的宽度)中,差异变得非常高.

Answer 1

解决方案是使用包含元素和 javascript 的组合： http: //jsfiddle.net/KaaXg/3/

这个小提琴包括这个 javascript 功能：

$(document).ready(function(){
    $(".container").css("width", $(".image").width());        
    $(window).resize(function(){
        $(".container").css("width", $(".image").width());        
    });
});

这里要注意的最重要的事情是，left值width是根据body元素计算的，这是无意的。

为了解决这个问题，我们添加了一个包含元素，其中包含div用于页面上红色块图形的图像和其他标签。

但是，如果没有 JavaScript，该left属性仍然仅在窗口大小调整后重新加载页面时“更新”。块级元素不会自行水平更新。

因此，您希望left和width与背景图像成比例，但当仅使用 CSS 调整页面大小或移动页面时，它们不会更新。上面的 JavaScript 解决方案会在页面大小调整时动态更新包含元素的宽度，从而解决了这个问题。

我保留了bottom和heightcss 样式，因为它们按照您网站的目的正常工作，容器的高度会增加以容纳其中的图像。

我不太确定您想对页面上的固定像素黑色块做什么，所以我将其保留原样。

编辑：我认真地修改了这个项目，创建了一个对象工厂来创建新图形并更新了页面的代码。该解决方案几乎不需要 HTML 或 CSS，有更多的 javascript 代码，但将使在页面上实现动态图形/添加新元素的功能变得更加容易。http://jsfiddle.net/RnCWN/9/

我在这里提出的 JavaScript 解决方案使用实时更新百分比来设置基于百分比的块的width和left属性，以及初始化静态height和bottom属性。

通过此修订，您可以使用该方法PercentageBasedGraphic在页面上创建浮动框。这是一个例子：

PercentageBasedGraphic(25, 10, 4, 30, "block1");

该函数将添加一个div带有id = "block1"属性的 ，以及相应的width、height、left和bottom值（全部以百分比表示）。div它还返回一个对象，其中包含调整刚刚创建的对象的大小和重新定位所需的所有信息。您可以通过向每个div. 不管怎样，我们最终如何使用返回的对象呢？

addGraphic(graphicArr, PercentageBasedGraphic(25, 10, 4, 30, "block1"));

该addGraphic函数将每个新的浮动框添加到数组中。稍后，我们在调整窗口大小时迭代此数组，以重新定位我们定义的所有浮动框。

老实说，《超级马里奥》的图形让这一切变得非常有趣。