当它们都缩放后，如何正确地计算图像并将其放置在另一个图像之上-跨浏览器？

Question

我有一个基本图片，上面有物品。 如果用户禁用其中一项，则应显示为已禁用。 为了解决这个问题，我使用了禁用项目的第二张图像（png），并将其放置在背景图像上方的正确位置。

如果没有缩放比例，则可以在所有浏览器上完美运行。

当缩放时（例如，在移动浏览器中，图像为原始大小的40％时） 仅在Firefox中有效 。 Firefox始终将图像放置在正确的位置，覆盖下面的项目。

其他浏览器（Android上的Chrome，Safari iOS）始终保持1-2像素关闭，具体取决于缩放级别。 因此，您可以在下面看到一些项目。

我该怎么做才能跨浏览器工作？

var heightRatio = bgOffsetHeight / originalHeight;
var widthRatio = bgOffsetWidth / originalWidth;

//Place the disabled items
for ( var i = 0; i < disableds.length; i++ )
{
    var disabled = disableds[ i ];

    /**
     * I also tried with "parseInt", but it still doesn't work.
     * 
     * originalLeft/Top/Width/Height are the values saved in 
     * JavaScript when the page is first loaded before everything
     * is scaled.
     */
    disabled.style.left = ( widthRatio * disabled.originalLeft ) + "px";
    disabled.style.top = ( heightRatio * disabled.originalTop ) + "px";
    disabled.style.width = ( widthRatio * disabled.originalWidth ) + "px";
    disabled.style.height = ( heightRatio * disabled.originalHeight ) + "px";

    //Make visible
    disabled.style.visibility = "visible";
}

Answer 1

您的背景使用白色还是其他纯色？ 然后，您可以尝试以下操作：在bg部分上放置一个空的div，然后应用background-color: rgba(255, 255, 255, .5) 。 这应该给您相同的效果，此外，它还可以节省大量其他图像。 但是仅当“ bg中的bg”是纯色时才有效。

Answer 2

仅在WebKit中会出现此问题，在WebKit中，单独计算宽度和高度比率会使浏览器无法正确调整大小和放置图像。 如果我更改代码以仅使用宽度比例，则所有内容都将正确放置在所有浏览器中：

//We no longer use height ratio for the height/top calculations
//var heightRatio = bgOffsetHeight / originalHeight;
var widthRatio = bgOffsetWidth / originalWidth;

//Place the disabled items
for ( var i = 0; i < disableds.length; i++ )
{
    var disabled = disableds[ i ];

    /**
     * I also tried with "parseInt", but it still doesn't work.
     * 
     * originalLeft/Top/Width/Height are the values saved in 
     * JavaScript when the page is first loaded before everything
     * is scaled.
     */
    disabled.style.left = ( widthRatio * disabled.originalLeft ) + "px";
    disabled.style.top = ( widthRatio * disabled.originalTop ) + "px";
    disabled.style.width = ( widthRatio * disabled.originalWidth ) + "px";
    disabled.style.height = ( widthRatio * disabled.originalHeight ) + "px";

    //Make visible
    disabled.style.visibility = "visible";
}