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

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

img 
{
width:100%;
}

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

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

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

Answer 2

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>

Answer 3

你肯定需要一些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 个答案: