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

Responsively position an image at specific target over background image

本文关键字：图像 目标 背景 定位 响应      更新时间：2023-09-26

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

两个图像的比例都是正确的，到目前为止，左边的位置可以工作，但顶部的位置不行。

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代码应该是什么样子。

这是我的jsfield:

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

我不确定你到底想用你的图像做什么，但是你可以创建一个新的更小的图像(绿点)与你的背景图像具有相同的宽高比，并有点放置在它需要在那个宽高比。然后将它的宽度拉伸到100%，两个图像基本上是重叠的，但是顶部的图像(较小的图像)有一个透明的背景。不确定这是否有意义，但我做了一个新图像，并做了小提琴的事情，这是我新的:http://jsfiddle.net/ydack/

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

我错误地将绿点的位置基于黑色轮廓，而不是完整的背景图像，所以这个点在它需要的地方稍微向上和右边。但是，在重新调整窗口大小时保持该位置。不容易，但这是可行的!

你肯定需要一些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通过使用基于像素的定位解决了这个问题。

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>
相关文章：