修復相對於縮放背景上的點的圖像

Question

我正在嘗試將圖像修復爲項目的背景圖像中的某個點。 我創建了一個jsbin，因爲我無法找到解釋我想要完成的任務的單詞。 http://jsbin.com/esUNEKIM/2/

在這個例子中，小地圖指針完全放置在背景圖像（在我的分辨率和全屏幕）的手指尖端，但在圖像縮小時移動。

任何線索？ PS：我需要兩個圖像分開。我對黑客開放，因爲這將是一個臨時着陸頁，我們並不真正關心舊的IE兼容性。

謝謝！

Answer 1

編輯：我現在看到它時垂直縮小我的瀏覽器 - 您需要添加垂直媒體查詢（例如：http://cognition.happycog.com/article/go-vertical/）或使用JavaScript。

實際上，當它按比例縮小但實際按比例放大時，我並沒有看到它的移動。對我來說，230px似乎一直工作到一個給定的點（大約1600px）。使用媒體查詢更改正確的位置。在我看來，16％似乎在這一點之後起作用。

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

如果您仍然看到它按比例縮小，則可以添加多個媒體查詢來調整位置。