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 に答える