Question

我有一个巨大的水平滚动网站。以Mario World为例。每个“资产”都是绝对的。

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

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

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

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

修改

请注意，在调整窗口大小时，黑色块（#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和height css样式，因为它们按照您的网站的目的工作，容器的高度增加以容纳其中的图像。

我不确定你想对页面上的固定像素黑色块做什么，所以我把它保持原样。

编辑：我认真对这个项目进行了全面改造，建立了一个对象工厂来创建新图形并更新页面代码。这个解决方案几乎不需要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函数将每个新的浮动框添加到数组中。稍后，我们在窗口调整大小时遍历此数组，以重新定位我们定义的所有浮动框。

我会诚实地对你说，超级马里奥的图形让这很有趣。

Answer 2

您可以尝试检查旧窗口（调整大小前）和窗口宽度和高度之间的差异，并使用此差异来更改左下角位置：

$(document).ready(function(){
    var width = $(window).width();
    var height = $(window).height();
    var blockLeft = parseInt($('#blockpx').css('left'));
    var blockBottom = parseInt($('#blockpx').css('bottom'));
    $(window).resize(function(){
        var difWidth = width - $(this).width();
        var difHeight = height - $(this).height();
        if (difHeight>0) {
            $('#blockpx').css('bottom',blockBottom-difHeight + 'px');
        } else {
            $('#blockpx').css('bottom',blockBottom+difHeight + 'px');
        }
        if (difWidth>0) {
            $('#blockpx').css('left',blockLeft-difWidth + 'px');
        } else {
            $('#blockpx').css('left',blockLeft+difWidth + 'px');
        }
    });
});

试试jsfiddle。

它是一个jquery变体，你可以使用普通的javascript做同样的事情。

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

2 个答案: