响应地将图像定位在背景图像上的特定目标答案

【问题标题】：Responsively position an image at specific target over background image响应地将图像定位在背景图像上的特定目标
【发布时间】：2014-07-01 04:04:10
【问题描述】：

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

两个图像都正确缩放，到目前为止，左侧位置有效，但顶部位置无效。

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/

【问题讨论】：

这是您的全部代码吗？如果是这样，你有很多错误没有关闭你的
标签。
关闭了我的标签。一点点css只是说明了我的问题。您是否尝试使用我的原始代码调整窗口高度？
查看我发布的答案。您需要对其进行一些修改以使其按预期工作，但至少它提供了您想要的基本功能。

标签： javascript jquery css image position

【解决方案1】：

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

img 
{
width:100%;
}

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

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

我错误地将绿点的位置基于黑色轮廓，而不是完整的背景图像，因此该点在它需要的位置稍微向上和右侧。但是，在重新调整窗口大小的同时保持位置。哈克，但它可以工作！

【讨论】：

感谢您抽出宝贵时间提出解决方案。如果我不需要代码也适用于 css sprite，这将起作用 - 我不确定在这种情况下我是否能够使用全屏宽度的图像。

【解决方案2】：

你肯定需要一些 javascript 来做这个。您可以做的是在调整浏览器窗口大小时计算图像的高度和宽度。然后简单地使用一些数学来计算点相对于这些尺寸的位置。

var height = $('#image').height();
var width = $('#image').width();

/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});

$(window).resize(function() {
    height = $('#image').height();
    width = $('#image').width();

    /* change the fractions here according to your desired percentages */
    $('#dot').css({left: width/2, top: height/2});
});

试试这个代码：http://jsfiddle.net/LimitedWard/FFQt2/3/

请注意，如果您希望它始终适合该框，您还需要根据图像的高度/宽度调整点的大小。

编辑：经过进一步调查，可以在 CSS 中执行此操作；但是，如果窗口太宽，点就不会跟随图像，因此会更加草率。这个 jQuery 通过使用基于像素的定位解决了这个问题。

【讨论】：

这太棒了。这正是我所需要的。

【解决方案3】：

http://jsfiddle.net/sajrashid/xBu79/24/

很多错误主要不是结束标签

<div id='background'>
  <img src='http://i.imgur.com/57fZEOt.png'/>
  <div id='dot'>
    <img src='http://i.imgur.com/yhngPvm.png'/>
  </div>
</div>

【讨论】：

我不相信这能解决她的问题。您使用基于像素的定位，而她希望在调整大小时点相对于图像的位置。