固定了背景附件，但全尺寸图片

如何解决固定了背景附件，但全尺寸图片

我在这里尝试了解决方法：CSS background-size: cover + background-attachment: fixed clipping background images

和其他一些地方，但是它们工作不充分。顶部的JS解决方案：

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('#container').css('background-position','left ' + ((scrolledY)) + 'px');
});

由于不断地重新定位，因此非常令人不快。另一个解决方案（responsive_calc一个）无法正常工作，因为我希望它居中。解决方案始终将其对齐。

我基本上想要一个背景尺寸：封面；但固定的附件。

基于JS的解决方案很好，只要它在滚动时不计算即可。

您可以在此处查看此问题的演示：https://codepen.io/oscargodson/full/abZbZeE

应该看起来像这样

但是我明白了：

解决方法

考虑使用object-fict和position:fixed

，使用图像标签是可行的

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.home-panel {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  height: 100vh;
}

.home-panel-media {
  height: 100vh;
  clip-path: inset(0); /* to clip the image to this div */
}

.home-panel-media img {
  height: 100vh;
  width: 50vw;
  position: fixed;
  top: 0;
  right: 0;
  object-fit: cover;
  object-position: top center;
}

<div id="wrapper">
  <div class="home-panels-wrapper">
    <div class="home-panel home-panel-1">
      <div class="home-panel-content">
        <h1>Hello World</h1>
        <p>
          Lorem ipsum dolar gamet
        </p>
        <p>
      </div>
      <div class="home-panel-media">
        <img src="https://i.pinimg.com/originals/a1/1e/2a/a11e2a9d5803e4dc2c034819ce12a16e.jpg">
      </div>
    </div>
    <div class="home-panel home-panel-2">
      <div class="home-panel-content">
        <h1>Hello World</h1>
        <p>
          Lorem ipsum dolar gamet
        </p>
        <p>
      </div>
      <div class="home-panel-media">
        <img src="https://images.squarespace-cdn.com/content/v1/56e05d74746fb93dcd805e8b/1553109528895-RYRDJLVNN61UDN65S59U/ke17ZwdGBToddI8pDm48kDmiacAi515_OfcChA6MRIQUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8PaoYXhp6HxIwZIk7-Mi3Tsic-L2IOPH3Dwrhl-Ne3Z23Oc3-AlX22j3PUzoYuTVI2MKzQWw7jmw4KYJnTQU-9E_twk1mUNduAk0T15_nZ7z/Tulsa-Headshot-Photographer_9639a.jpg?format=1500w">
      </div>
    </div>
  </div>
</div>