Javascript 当分辨率改变时，背景图像不会停留在页面的两侧

我对css动画非常陌生，但我的页面看起来就像我想要的，除了这个小毛病。我有一个使用scrollspy.js的滚动动画，当它点击某个div图像时，会向左或向右滑动到页面中

但是，当你点击control+M向下键时，它不会像我希望的那样从浏览器窗口外部启动动画。我使用1920x1080分辨率作为参考

基本上，在页面加载时，它看起来很好：

但是，当使用ctrl+M向下键时，它会变成一个丑陋的页面：

我需要它的规模。 有谁知道我做错了什么

HTML:

滚动间谍功能：

//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){ 
   $('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
    wow.addBox(this);
}).scrollSpy();

$('#pgc-4-1-2').on('scrollSpy:enter',function(){
    $(this).removeClass('animated');
    $('.panel-row-style-for-4-1')
    .removeClass('past-active')
    .addClass('active')
    .removeClass('animated')
    .css({
        'animation-name' : 'slideInLeft'
    })
    wow.addBox(this);
}).scrollSpy();

---

你能展示你的代码吗？@Kermit更新了代码。很不幸的是：/这不会立即修复所有问题，但这

.site-inner{max-width:1200px；}

会导致您的内容在缩小页面时无法填满整个页面。你还有其他问题，或者至少有一个；放大/缩小时，手机的图像与屏幕不对齐。但这是另一个问题。通过添加此

.sow图像容器{position:relative；}

和

.phone.layer{position:absolute；top:0；bottom:11px；left:0；right:0；margin:auto；}

，您可以走得更远。现在只需计算宽度。最好也在CSS中设置，但为此，我认为您必须设置

.sow image container

的宽度，然后设置

so widget image{width:100%；}

和

.phone.layer{width:87%；}

。但是当你放大/缩小时，手机不会调整大小。。哦，好吧，至少给了你一些可以合作的东西：）@myfunkyside我很感谢你的建议。这是一个WordPress主题，所以我认为该主题将其设置为1200px。如果需要的话，我可以更改它，因为我正在修改一切。。。因此，这条漫长的路线没有问题。

    .can-transform3d .active.has-bg:before,
  .can-transform3d .active.has-bg:after,
  .can-transform3d .past-active.has-bg:before,
  .can-transform3d .past-active.has-bg:after {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    /*transform: translate3d(328px, 0, 0);*/
     transform: translate3d(0px, 0, 0);
  }

.has-bg {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.has-bg:before,
.has-bg:after {
  content: '';
  position:absolute;
  display: block;
  opacity: 0;
  -webkit-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  -moz-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  -o-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  -ms-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  -webkit-transition-delay: .25s; /* Safari */
  transition-delay: .25s;
  z-index: 1;
  visibility: visible;
  background-repeat: no-repeat;
  background-attachment: scroll;
  clear: both;
  /*width: 100%;*/
}

.past-active:before,
.past-active:after,
.active:before,
.active:after {
  opacity: 1 !important;
}

.page {
    height: auto;
    width: 100%;
    position: relative;
    text-align: center;
    /*padding-top: 60px;*/
    z-index: 1;
}

   .can-transform3d .left-phone:before,
  .can-transform3d .left-phone:before,
  .can-transform3d .left-phone:after,
  .can-transform3d .left-phone:after {
    -webkit-transform: translate3d(150px , 0, 0);
    -moz-transform: translate3d(150px , 0, 0);
    -o-transform: translate3d(150px , 0, 0);
    -ms-transform: translate3d(150px , 0, 0);
    /*transform: translate3d(682px , 0, 0);*/
    transform: translate3d(150px , 0, 0);
  }

 .left-phone:before,
.left-phone:after {
  margin-left: 0;
  /*right: 0;*/
}

.active .phone .screen-left, .active .phone .screen-right, 
.past-active .phone .screen-left, .past-active .phone .screen-right {
    opacity: 1;
}

.phone .screen-left, .phone .screen-right {
    opacity: 0;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.phone .screen-left {
    position: absolute;
    top: 12.06656%;
    left: 22.37791%;
    /*width: 75.460123%;*/
}

.layer {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

  .feed:before, .discover:before {
  background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/watch3-transparent-bg-e1500713498530.png);
  /*top: -150px;*/
  height: 564px;
  width: 330px;
  /*right: -425px;*/
  right: -425px;
  /*background-position: right center;*/
}

.feed:after, .discover:after {
  background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/bracelet-e1500713698821.jpeg);
  height: 260px;
  width: 260px;
  bottom: 0;
  /*right: 15%;*/
  right: -6%;
  /*background-position: 70% center;*/
}

//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){ 
   $('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
    wow.addBox(this);
}).scrollSpy();

$('#pgc-4-1-2').on('scrollSpy:enter',function(){
    $(this).removeClass('animated');
    $('.panel-row-style-for-4-1')
    .removeClass('past-active')
    .addClass('active')
    .removeClass('animated')
    .css({
        'animation-name' : 'slideInLeft'
    })
    wow.addBox(this);
}).scrollSpy();