我有一个奇怪的问题。我编写了一个小函数来调整我正在处理的站点上的图像大小,它适用于站点上的每个图像,除了两个位于动态大小的容器中的图像。在 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 中。任何帮助,将不胜感激!提前致谢!