html - 如何使用背景附件拉伸图像：固定到变换：缩放的 div？

Question

我有一个中心 div，它有一个背景图像和内容，它也被缩放以适应某些设备。

所以 div has transform: scale(1.5)，它有一个背景 background-attachment: fixed;来保持背景。但我无法弄清楚如何拉伸图像以适应整个 div。

我没有运气玩背景大小。对图像应用变换transform: translateY(-10%)确实会使图像向上移动，但这些看起来像是神奇的数字。有人有想法吗？

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#content {
  height: 100%;
  width: 100%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

#center {
  transform: scale(0.5);
  width: 200px;
  height: 800px;
  position: relative;
  background-color: red;
}

#text {
  color: blue;
  position: absolute;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#img {
  background-image: url("https://i.imgur.com/CVdJba5.png");
  width: 100%;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

<div id="content">

  <div id="center">
    <div id="img">

    </div>
    <div id="text">


      content content content content content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content content content content contentcontent
      content content content content content content content content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content
      content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content content content content contentcontent content content
      content content content content content content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content content content
      content contentcontent content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content
    </div>
  </div>
</div>

jsfiddle：https ://jsfiddle.net/a85qev0h/3/

Answer 1

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#content {
  height: 100%;
  width: 100%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#center {
  transform: scale(0.5);
  width: 200px;
  height: 800px;
  position: relative;
  background-color: red;
}

#text {
  color: blue;
  position: absolute;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#img {
  background-image: url("https://i.imgur.com/CVdJba5.png");
  width: 100%;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div id="content">

  <div id="center">
    <div id="img">

    </div>
    <div id="text">


      content content content content content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content content content content contentcontent
      content content content content content content content content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content
      content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content content content content contentcontent content content
      content content content content content content content content contentcontent content content content content content content content content content content contentcontent content content content content content content content content content
      content contentcontent content content content content content content content content content content content content content content content content content content content content content content content content content content content content
      content content content
    </div>
  </div>
</div>