使用 CSS 自动缩放具有背景的 div 以适应其父元素

Question

我正在制作一个由左右部分组成的应用程序布局。

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.leftSection {
  flex: 0.7;
  background-color: #ccc;
}

.rightSection {
  flex: 0.2;
  background-color: #ccc;
}

<div class="container">
  <div class="leftSection">
    Left Section
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>

在此

.rightSection

div 将保持原样，只需要查看左侧部分。

左侧部分将有一个背景图像，其中包含一些空间，我需要在其中包含子组件图。

背景图片会像，

填充子组件的预期结果是，

所以我试着填写左边的部分，比如，

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.leftSection {
  flex: 0.7;
}

.rightSection {
  flex: 0.2;
  background-color: #ccc;
}

.bgContainer {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 401px;
    width: 688px;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
}


.coil {
    position: absolute;
    top: 49.55%;
    left: 24.3%;   
}
.evaporator {
    position: absolute;
    top: 7.25%;
    left: 54.5%;
}
.compressor {
    position: absolute;
    top: 53.15%;
    left: 59.2%;
}

<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
        <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>

到目前为止一切都很好。但是我正在为平板电脑屏幕实现这个，其中设备的宽度将从

600px

到

1400px

.

所以我需要让这个部分在所有设备上响应，从宽度

600px

到

1400px

。

所以我分解为父 div 设置一些宽度，将其视为设备宽度，如

600

、

1024

和

1200

（只是为了例如..，）我已经让它像这个静态宽度。

.first {
  width: 600px;
  border: 2px solid #000;
  margin: 30px;
}

.second {
  width: 1024px;
  border: 2px solid #000;
  margin: 30px;
}

.third {
  width: 1200px;
  border: 2px solid #000;
  margin: 30px;
}

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.leftSection {
  flex: 0.7;
}

.rightSection {
  flex: 0.2;
  background-color: #ccc;
}

.bgContainer {
    background-image: url('https://i.stack.imgur.com/AfygH.png');
    height: 401px;
    width: 688px;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
}


.coil {
    position: absolute;
    top: 49.55%;
    left: 24.3%;   
}
.evaporator {
    position: absolute;
    top: 7.25%;
    left: 54.5%;
}
.compressor {
    position: absolute;
    top: 53.15%;
    left: 59.2%;
}

<div class="first">
<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
        <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>
</div>

<div class="second">
<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
        <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>
</div>

<div class="third">
<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
        <div class="coil">
    <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
  </div>
  <div class="evaporator">
    <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
  </div>
  <div class="compressor">
    <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
  </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>
</div>

在上面的代码片段中，在

.first

内部，左侧部分出现在

.second

和

third

中，它也处于不同的位置。

所以最后我的要求是如何使带有背景图像的左侧部分与所有平板电脑屏幕一起响应，至少从

600

像素到

1400

像素。

在实际应用中： 现在我的主要问题是设计超出了屏幕的大部分底部，

我试过使用

transform: scale(2.0);

，但左边的部分仍然超出了屏幕。如上图，我需要动态计算这个比例值吗？请帮助我解决这个问题，因为我已经苦苦挣扎了很长时间。

更新1：

如果我给特定的 div 设置宽度，

.coil {
  position: absolute;
  top: 49.55%;
  left: 24.3%;
  width: 17%;
}

.evaporator {
  position: absolute;
  top: 7.25%;
  left: 54.5%;
  width: 12%;
}

.compressor {
  position: absolute;
  top: 53.15%;
  left: 59.2%;
  width: 13%;
}

然后当设备高度变小或变大时我会遇到问题。

实施后，

下面的屏幕截图是在屏幕视口中捕获的，高度：844 和宽度：1280

以下屏幕截图是在屏幕视口中捕获的，高度：552 和宽度：1024

Answer 1

也许可以使用背景大小为 .container 类尝试此 CSS 代码：封面：

.container {
  background-image: url('https://i.stack.imgur.com/AfygH.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin: 0 auto;
}

Answer 2

首先，我们可以把背景图片做成普通的块，这样它就是主要的宽度和高度。然后我们可以将图像的宽度设置为

100%

，并且背景图像是这样的，它将保持其纵横比。由于您手动计算组件的

top

，

left

位置，为什么不手动计算

width

：

.container {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.leftSection {
  flex: 0.7;
}

.rightSection {
  flex: 0.2;
  background-color: #ccc;
}

.bgContainer {
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
}

.bg-img {
  display: block;
  width: 100%;
}

.coil {
  position: absolute;
  top: 49.55%;
  left: 24.3%;
  width: 17.4418605%;
}

.evaporator {
  position: absolute;
  top: 7.25%;
  left: 54.5%;
  width: 11.627907%;
}

.compressor {
  position: absolute;
  top: 53.15%;
  left: 59.2%;
  width: 13.0813953%;
}

.component img {
  display: block;
  width: 100%;
}

<div class="container">
  <div class="leftSection">
    <div class="bgContainer">
      <img src="https://i.stack.imgur.com/AfygH.png" class="bg-img" />
      <div class="component coil">
        <img src="https://i.stack.imgur.com/SKUms.png" alt="coil-image" />
      </div>
      <div class="component evaporator">
        <img src="https://i.stack.imgur.com/spv58.png" alt="evaporator-image" />
      </div>
      <div class="component compressor">
        <img src="https://i.stack.imgur.com/fzSaH.png" alt="compressor-image" />
      </div>
    </div>
  </div>
  <div class="rightSection">
    Right Section
  </div>
</div>

这应该对所有设备都有响应。如果你真的需要，你也可以用 javascript 自动计算，但我修复了这个解决方案，因为你手动计算

top

，

left

位置。