javascript - 图像加载上的javascript marginLeft在Chrome中不起作用

Question

我有这个画廊，它用 javascript 调整图像大小以保持原始纵横比。关于文档结构：考虑到这个特定对象的样式表如下：

 #ThePicture {position:absolute;left:50%;height:100%;max-width:100%;}

然后 PHP 为菜单构建图像列表，最近的一组#ThePicture 是用以下 javascript 操作的

 function KeepRatio() {
 var height = document.getElementById('ThePicture').height;
 var width = document.getElementById('ThePicture').width;
 var origHeight = document.getElementById('ThePicture').naturalHeight;
 var origWidth = document.getElementById('ThePicture').naturalWidth;
 var ratio = origWidth / origHeight;
 document.getElementById('ThePicture').width = height * ratio;
 document.getElementById('ThePicture').style.marginLeft = - width/2;
 }

我在选择要查看的新图像的实例中调用此函数一次，window.onload然后在每个实例中调用此函数，因此打开...ThePicture').onload

现在我遇到的问题只发生在 Chrome 中：首先没有任何图像设置为 ThePicture（几乎可以肯定是由 Javascript 函数制作的，因为初始图像是在 PHP 构建整个页面之后就位的。），在第一次点击菜单选择新图像，没有任何反应，在第二次单击图像出现在其预期位置之外，在第三次单击时，负边距被计算，将图像移动到它的位置。我的页面在 Opera 和 Mozilla 中运行良好。