javascript - 响应地将图像定位在背景图像上的特定目标处

Question

我有一个响应式背景图片，上面有一个较小的图片。调整窗口大小时，我试图将较小的图像保留在特定位置。

两张图片都正确缩放，左侧位置目前有效，但顶部位置无效。

img {
max-width:100%;
}

#dot {
position: absolute;
top: 17%;
left: 66.5%;
width: 10%;
height: 0;
padding-bottom: 10%;

我发现一些问题的答案表明:

使用 Javascript 进行垂直对齐或定位

我还研究了 .position() 和 .offset()，不确定两者是否可行。

我认为我最好的解决方案是使用当前窗口高度作为引用来计算 Y 偏移量，但我不确定我的 JS 或 Jquery 代码应该是什么样子。

这是我的 jsfiddle:

http://jsfiddle.net/melissadpelletier/xBu79/21/

Answer 1

我不确定您要对图像做什么，但您可以创建一个新的较小图像(绿点)，其纵横比与背景图像相同，并将该点放在需要的位置在该宽高比内。然后将其宽度拉伸(stretch)为 100%，两个图像基本上重叠，但顶部图像(较小的图像)具有透明背景。不确定这一切是否有意义，但我制作了一个新图像并做了一些小事，这是我的新手:http://jsfiddle.net/ydack/

img 
{
width:100%;
}

#dot
{
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

#dotImg
{
    top: 0;
    left: 0;
    width: 100%;
}

我根据黑色轮廓错误地放置了绿点的位置，而不是完整的背景图像，因此该点稍微偏上并偏向了它需要的位置。但是，在调整窗口大小时保持该位置。 Hacky，但它可以工作!