Javascript:如何修改我的 JS 以调整背景图像的大小以停止 chop 边缘？

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，它可以缩小和扩展响应式网页设计的背景图像。

这是我在 app/assets/javascripts/application.js 中的 JS，除了稍微 chop 图像的右边缘外，它工作正常。

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');

我还尝试了以下方法，它也稍微 chop 了图像的右边缘。

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

原始图像可能只有 10-20 个像素，每条边上都没有文字。根据大小，它会 chop 图像右侧的文字所在。

我在 Stack Overflow 上搜索过，但到目前为止还没有找到解决方案。

Answer 1

图像略有修改，但我仍然遇到右侧 chop 的问题。我修改了 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);

在调整浏览器窗口大小时，不会发生 chop 并且图像会调整大小。