1

私はいくつかの背景画像を使用background-size: coverしてレスポンシブ Web サイトを構築しています..まあ... 背景画像で div をカバーしています。divではなく、画像を基準にして、画像の特定の部分の位置を常に取得する必要があります。

デモンストレーションのみを目的として、次のシナリオを検討してください。

この画像を使用してdivをカバーします ここに画像の説明を入力

今、私は常に iPhone の上にスポットを取得したいと考えていdivますbackground-size: cover。

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

divこれを使用して、 を画像の上にラベルまたはボタンとしてオーバーレイしたいと考えています。明らかな問題は、オーバーレイが親 div に対して相対的に配置されていることです。しかし、私はそれらが画像内のiPhoneに相対的である必要があります.

ここに JSFiddle があります: http://jsfiddle.net/3NuDy/フレームのサイズを変更してください! 赤いラベルは常に iPhone の真上にある必要があります。

これは HTML5、CSS3 、Javascript (jQuery)で可能ですか?

編集: div に対する iPhone (または赤いスポット) のさまざまな位置を示す別の画像を追加しました。

Edit2: 私の問題を説明するために JSFiddle を追加しました。フレームをリサイズ！赤いラベルは常に iPhone の真上にある必要がありますhttp://jsfiddle.net/3NuDy/

4

2 に答える 2

1

あなたの質問を正しく理解していれば、次のことがうまくいく可能性があります。

$(window).resize(function() {
    var width = $(window).width();
    var offsetdot = $('#dot').offset().left;
    console.log(width); // get reference width of window - in my case 692
    console.log(offsetdot); // get reference offset left of #dot - in my case 400

    var leftfactor = 400/692; // divide offset of width for the factor where the dot is
    newleft = leftfactor*width; // use factor to calculate new pos
    $('#dot').css('left', newleft); //insert new pos to left
});

あなたの値は私の値とは異なる可能性があるため、最初のサイズ変更でスナップしますwidth。しかし、ご覧のとおり、赤い点は常に画像の同じ幅にあります。あなたがする必要があるのは、同様にそれを行うことtopだけです.

役立つかもしれません。フィドル

編集：常に同じ位置にありますが、サイズが変わらないため、ドットも縮小する必要があり、わずかにずれているように見えます。しかし、そうではありません#dot。

于 2013-06-25T12:21:37.323 に答える
0

まだ試していませんが、オーバーレイ div をパーセント設定で配置する必要があると思います。背景画像の幅が div の幅全体に広がる場合、100% に相当します。したがって、たとえば、オーバーレイmargin-left: 50%div を配置すると、常にコンテナー div の同じ相対位置に配置されます。

更新: 私は例を作成します。見てください: http://jsfiddle.net/zpYQZ/8/

于 2013-06-25T10:12:13.567 に答える