1

我有一个奇怪的问题。我编写了一个小函数来调整我正在处理的站点上的图像大小，它适用于站点上的每个图像，除了两个位于动态大小的容器中的图像。在 IE10 和 Firefox 中，两者都不一致地使用错误的图像宽度/高度，而是吐出一个奇怪的数字，然后公式会弄乱图像的大小调整。

我正在尝试做的总体情况是这样的：我有一个部分应该是屏幕的整个高度，减去 60px 以说明固定的导航菜单。这两个图像在这个部分内，应该是它的一半高度和宽度（这个部分有四个大小相同的正方形，其中两个包含有问题的图像）。由于该部分的高度是在页面加载时动态计算的（浏览器高度的 100% 减去 60px），我假设有时这个函数在容器的高度被正确计算之前运行，所以图像被奇怪地缩放。

这是我认为所有相关代码的内容：

function onResize() {

    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

    $("#FourSquareSectionContainer").css("height", h - 60 );

    ResizeItem($("#SecondSquareBGImage"), (w / 2), ((h - 60)  / 2));
    ResizeItem($("#ThirdSquareBGImage"), (w / 2), ((h - 60)  / 2));

}

function ResizeItem(item, w, h) {

    var aspect = item.width() / item.height();
    var SlideWidth = aspect * h;
    var SlideHeight = w / aspect;

    if (SlideWidth < w) SlideWidth = SlideHeight * aspect;
    if (SlideHeight < h) SlideHeight = SlideWidth / aspect;

    item.width(SlideWidth);
    item.height(SlideHeight);
    item.css('top', Math.ceil((h - SlideHeight) / 2));
    item.css('left', Math.ceil((w - SlideWidth) / 2));

}

我的假设是，由于 FourSquareSectionContainer 的高度是动态的（它应该总是比页面的全高小 60px），并且由于 SecondSquareBGImage 和 ThirdSquareBGImage 的高度取决于这个高度（它们都应该是一半FourSquareSectionContainer 的高度和宽度的一半），某种竞争条件正在发生，其中偶尔会为图像使用错误的大小并且它们被过度拉伸。

值得注意的是，这个问题只在 IE10 和 Firefox 中发生（同样，不一致）。Chrome 和 Safari 从来没有这个问题。

这个问题困扰了我一段时间，我不确定正确的解决方案是什么。正如我所说，这个问题非常不一致，只发生在 IE10 中，很少发生在 Firefox 中。任何帮助，将不胜感激！提前致谢！

4

0 回答 0