Javascript：JSを変更して背景画像のサイズを変更し、エッジを切り捨てる方法を教えてください。

Question

現在私のスタイルシートに、私のRails 5アプリケーションで次のCSSがあります。

#intro { 
    @media screen and (orientation: portrait) { padding: 25px 0; 
     background: url("portraitbackgroundimage.jpg"); 
    } 
    @media screen and (orientation: landscape) { padding: 25px 0; 
     background: url("landscapebackgroundimage.jpg"); 
    } 
} 

レスポンシブウェブデザインの背景イメージを縮小して展開するJavaScriptに取り組んでいます。

ここで私のJSはapp/assets/javascripts/application.jsですが、イメージの右端を少し切り捨てる以外は問題ありません。

var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
$('#intro').css('background-size', screenWidth+'px '+screenHeight + 'px'); 

また、画像の右端を少し切り取ってみました。

$('#intro').css('background-size', $(window).width()+'px '+$(window).height()+ 'px'); 

元の画像は、各エッジにテキストがなくても10-20ピクセルしかない場合があります。サイズによっては、レターがある画像の右端が切り捨てられています。

私はスタックオーバーフローを検索しましたが、解決策が見つかりませんでした。

Answer 1

画像はわずかに変更されましたが、右側の切り捨てにはまだ問題がありました。私はCSSとJSの両方を修正しました。

CSS

#intro { 
    @media screen and (orientation: portrait) { padding: 25px 0; 
     background: url("portrait.jpg") center center; 
    } 
    @media screen and (orientation: landscape) { padding: 25px 0; 
     background: url("landscape.jpg") center center; 
    } 
} 

JS

function resizeIntroImage() { 
    var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
    var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
    $('#intro').css('background-size', screenWidth+'px '+screenHeight + 'px'); 
} 
resizeIntroImage(); 

window.addEventListener("resize", function() { 
    resizeIntroImage(); 
}, false); 

ませ切り捨ては起こらないと、ブラウザウィンドウのサイズが変更されたときの画像はサイズを変更します。