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

问题描述

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

所以 div 有 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/

解决方法

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>