获取图像相对于父级的位置，考虑垂直偏移答案

【问题标题】：Get position of image relative to parent, taking vertical-offset into consideration获取图像相对于父级的位置，考虑垂直偏移
【发布时间】：2012-01-30 06:24:33
【问题描述】：

我在 HTML 中有两个相邻的图像。一张图片比另一张高。图片有一个vertical-align: middle CSS 属性。这会导致较短的图片相对于父容器的位置低于较高的图片。

我使用 jQuery .position() 方法来获取图像的位置。两个图像的 position.top 是相同的，因为vertical-align: middle CSS 属性，显然较短的图像进一步向底部偏移。

考虑到vertical-align: middle CSS 属性引起的垂直差异，如何获取图像的实际位置？

更新：

问题发生是因为我做了以下事情：

我的 HTML 输出的图像没有 src 属性。他们是这样有宽度和高度，所以浏览器不需要等待在计算其位置之前加载实际图像（稍后步骤）
我设置了每张图片的src属性
我使用 jQuery 检查位置。我的猜测是浏览器（FF 9.0.1) 在更新其位置并使其可用于 JS 之前等待加载图像

我需要重新设计我的应用，以免发生这种情况

【问题讨论】：

你能展示 HTML、jQuery 和 CSS 吗？
我的问题似乎因一些不那么直截了当的事情而变得复杂。我刚刚开始设置我正在经历的行为的简单演示，在最简单的情况下，两个图像的位置都被正确返回。进一步研究...

标签： javascript jquery html css

【解决方案1】：

试试这个。

http://jsfiddle.net/cadence96/X54gy/

small = parseInt($('img:eq(0)').css('height'));
big = parseInt($('img:eq(1)').css('height'));

difference = big - small;
top_distance = difference/2;

alert(top_distance);

【讨论】：

【解决方案2】：

只需得到较高的div 的高度，减去相关div 的高度，然后除以2。这将得到它与父div 的偏移量。

【讨论】：

【解决方案3】：

using jquery.offset 会给你它相对于全身的实际位置。如果您只希望它相对于其父级，您可以编写一个这样的脚本；

function findPos(obj,till){
    var curleft = curtop = 0;
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
    return [curleft,curtop];
}

【讨论】：