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

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

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

当我这样做时，很明显，当我调整浏览器窗口的大小时，资源的大小被正确地调整了。但是项目的位置是以像素为单位的，因此相对于背景，事物会移动到不合适的位置

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

我不确定我现在说的是否有道理。。如果有任何问题，请告诉我

编辑

下面是一个JSFIDLE：

---

请注意，调整窗口大小时，黑色块（

#blockpx

）使用像素定位，因此在调整大小期间不会受到影响。然而，红色块（

#blockpercentage

）的大小和位置是使用百分比确定的，实现了我想要的效果：粘贴到预期位置（即背景图像的位置）。然而，它并不准确——在本例中这并不重要，但在较大的设置（较宽的宽度）中，差异会非常大。

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

$(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');
        }
    });
}); 

试穿一下

---

它是一个jquery变体，您可以使用普通javascript执行相同的操作。

解决方案是使用包含元素和javascript的组合：

此fiddle包含以下javascript功能：

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

这里需要注意的最重要的一点是，

left

和

width

值是针对

body

元素计算的，这是意外的

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

div

标记

但是，在没有javascript的情况下，

left

属性仍然仅在窗口大小调整后重新加载页面时“更新”。块级图元不会自行水平更新

因此，您希望

左侧

和

宽度

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

我只保留了

底部

和

高度

css样式，因为它们按照网站的目的工作，所以容器的高度会增加，以容纳其中的图像

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

编辑：我认真检查了这个项目，创建了一个对象工厂来创建新的图形，并更新了页面的代码。这个解决方案几乎不需要HTML或CSS，有更多的javascript代码，但可以更容易地在页面上实现动态图形/功能性地添加新元素

我在这里提出的javascript解决方案使用实时更新百分比来设置基于百分比的块的

width

和

left

属性，以及初始化静态

height

和

bottom

属性

使用此修订版，您可以使用方法

PercentageBasedGraphic

在页面上创建浮动框。下面是一个例子：

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

此函数将添加一个带有

id=“block1”

属性的

div

，以及相应的

宽度

、

高度

、

左侧

和

底部

值（均以百分比表示）。它还返回一个对象，该对象包含调整和重新定位刚刚创建的

div

所需的所有信息。通过向每个

div

添加不同的类，可以轻松扩展此函数。无论如何，我们最终如何使用返回的对象

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

addGraphic

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

---

老实说，超级马里奥图形让这项工作变得非常有趣。

你能在jsfiddle.net上重现你的问题吗？@starowere，刚刚用jsfiddle更新了我的问题。谢谢starowere，但这似乎不起作用。正如你所看到的，与它应该粘贴的位置相比，黑色块一直不合适。它必须始终保持相同的大小？或者它必须调整为窗口大小？按比例调整大小，但随着窗口大小的调整而缩放。纯粹的天才。非常感谢！赏金都是你的，只要我能给你！但从技术上讲，您可以将背景图像包装在div元素中，并为div预先定义一些宽度。因此，

左侧

和

宽度

将基于此容器而不是

主体

计算。因此，您不需要使用JS重新计算调整大小，而是让CSS来处理。对吧？我先试过了。正如我所描述的，问题在于包含元素的宽度永远不必拉伸，因此块的

宽度

和

左侧

永远不会更新。在这里试试：。。。请注意，调整页面大小时，

.container

仅会增加高度并保持相同的宽度。在重新加载页面之前，不会再次定位块。除非有人能想出更好的答案，否则我只能考虑使用javascript来完成这项任务