css - 相对于缩放背景上的点修复图像

Question

我正在尝试将图像修复到项目背景图像中的某个点。我创建了一个 jsbin，因为我找不到解释我想要完成的内容的词。 http://jsbin.com/esUNEKIM/2/

在示例中，小地图指针完美地放置在背景图像中的指尖（在我的分辨率和全屏下），但当图像缩小时会移动。

有什么线索吗？

PS：我需要将两个图像分开。我对黑客持开放态度，因为这将是一个临时登陆页面，我们并不真正关心旧的 IE 兼容性。

谢谢！

score 0 · Accepted Answer

编辑：当我垂直缩小浏览器时，我现在看到了 - 你需要添加垂直媒体查询（例如：http ://cognition.happycog.com/article/go-vertical/ ）或使用 JavaScript。

实际上，当它按比例缩小时，我并没有看到它移动，而是在按比例放大时。对我来说，230px 似乎工作到给定点（大约 1600px）。使用媒体查询来更改正确的位置。在我看来，在那之后 16% 似乎有效。

@media screen and (min-width: 1600px){
    #capsule {
    right: 16%;
    }
}

如果您仍然看到它按比例缩小，您可以添加多个媒体查询来调整位置。

1 回答 1