css - スケーリングされた背景上の点を基準にして画像を固定する

Question

プロジェクトの背景画像の特定のポイントに画像を固定しようとしています。達成しようとしていることを説明する言葉が見つからなかったため、jsbin を作成しました。 http://jsbin.com/esUNEKIM/2/

この例では、小さなマップ ポインターが背景画像の指先に完全に配置されていますが (私の解像度とフル スクリーンで)、画像が縮小されると移動します。

手がかりはありますか？

PS: 2 つの画像を別々にする必要があります。これは一時的なランディング ページであり、古い IE との互換性については特に気にしていないため、私はハッキングに対してオープンです。

ありがとう！

Answer 1

編集: ブラウザーを縦方向に縮小すると表示されるようになりました。縦方向のメディア クエリ (例: http://cognition.happycog.com/article/go-vertical/ ) を追加するか、JavaScript を使用する必要があります。

縮小したときではなく、拡大したときに実際に動くのを見ました。私にとって、230pxは特定のポイント（約1600px）まで機能するようです。正しい位置を変更するには、メディア クエリを使用します。その時点以降は 16% が機能しているように見えます。

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

縮小しても表示される場合は、複数のメディアクエリを追加して位置を調整できます。