フルスクリーン＆中心の背景画像スクリプト

Question

私は、ウィンドウのサイズに合わせて画像のサイズを調整する簡単な機能を作りました。私はいつ正確に判断することはできませんが、時にはimgが画面の幅を埋めることはありませんが、高さに固執し続けます。なぜこれができるのか？

iコンソールログ（iRatio < = wRatio）のいずれかが適合しているようですが、表示された結果が正しくありません。

imgは、CSSでpostion: absolute; with: 100%; top:0; left:0;と設定されています。あなたはそれが親の幅をいっぱいになります100％に画像の幅を設定している場合 $winは$(window)と$img背景画像

function autoImageSize($img, $win){ 
     var wHeight = $win.height(), 
      wWidth = $win.width(), 
      iHeight = $img.height(), 
      iWidth = $img.width(), 
      iRatio = iWidth/iHeight, 
      wRatio = wWidth/wHeight; 

      if(iRatio <= wRatio){ 
      $img.css({ 
       width: "100%", 
       height: "auto", 
       top: "-" + ((iHeight - wHeight)/2) + "px", 
       left: 0 
      }); 
      }else{ 
      $img.css({ 
       width: "auto", 
       height: "100%", 
       top: 0, 
       left: "-" + ((iWidth - wWidth)/2) + "px" 
      }); 
      } 

      return [$img.width(), $img.height()]; 
}; 

Answer 1

問題ました：

left: "-" + ((iWidth - wWidth)/2) + "px" 

と

top: "-" + ((iHeight - wHeight)/2) + "px" 

これは否定を行うための愚かな方法です。結果は--somenumber pxでした。私はこの操作を行うことで問題を解決しましたが、iHeightはwHeightより小さく、wWidthより小さいwWidth、そして-1で乗算することで否定を計算します。

Answer 2

が含まれています。 100％の高さの場合と同様に、しかし、そこに親はまた、ピクセルで（私が知る限り）固定高さが必要です。

代わりに100％に高さを設定するとき、画像の比率を使用して、ウィンドウの高さに一致する幅を計算する必要があります：

var toWidth = $win.height() * iRatio; 
$img.width(toWidth);