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

Question

我有一个巨大的水平滚动网站。作为一个例子，可以考虑一个Mario World。每个“资产”都是绝对定位的。

我想有项目的大小（高度和宽度）是相对于浏览器的视窗（所以使用百分比），但需要定位用实际像素从左边等项目

当我这样做显然是在调整浏览器窗口大小时正确调整了资源的大小。但是这些项目的位置是以像素为单位的，所以相对于背景而言，它们的位置不合适。

有没有简单的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和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来做同样的事情。