0

ハイブリッド アプリを構築しようとしていますが、背景の特定の部分のサイズを取得する必要があります。

  • 背景には次のプロパティがあります。 background-size: 100% 100%; background: url('back.jpg') no-repeat center center fixed;
  • その背景の上に div を配置し、div のサイズを背景の正確な部分のサイズに設定したいと思います。

これが私がやりたいことを明確にするための画像です: 赤い四角形の背景の例

上の背景画像の赤い四角形は、レスポンシブ画面でサイズを計算したい画像の部分の例です。

このトピックPosition element over background imageのおかげで、要素を背景の正しい絶対位置に合わせる方法を知っていますが、正しいスケールにサイズを変更する方法はわかりません。

誰でも助けることができますか？

4

1 に答える 1

0

やっと問題を解決できました。思ったほど複雑ではありませんでした。

  • まず、背景の幅と高さを知ることです

  • 2つ目は、背景に必要な要素のサイズを知ることです（たとえば、赤い恐怖）

    // In css : background-size: 100% 100%;
var background = {width: 1200, height: 900 };
var redScare = {selector: '.redScare', width: 400, height: 342, x: 50, y: 60};

var xFactor = $( window ).width() / background.width;
var yFactor = $( window ).height() / background.height;


// New width proportionally to the window size
redScare.width = redScare.width * xFactor;
// New height proportionally to the window size
redScare.height = redScare.height * yFactor; 

//Setting the new dimensions

$(redScare.selector).css('width', redScare.width);
$(redScare.selector).css('height', redScare.height);
于 2016-03-12T16:05:11.240 に答える