响应式配置器的问题

Question

我在制作响应式轮毂盖配置器时遇到了问题。我不知道该如何处理。我试图用 CSS 网格来制作它，但每次我改变网站的大小时，我的轮胎都不能完全适合它们的位置。我在想这样的事情：

但不幸的是它不起作用。

现在我正在尝试使用相对位置和绝对位置来实现它，但它仍然不起作用。

Html:

 <main class="content">
    <div class="content__car">
        <img src="assets/kolpaki_bez_opon/4racing/le_mans_pro_pink_black.png" alt="" class="content__rig-left">
        <img src="assets/kolpaki_bez_opon/4racing/le_mans_pro_pink_black.png" alt="" class="content__rig-right">
    </div>
</main>

Scss:

.content {
  background: url('../assets/tlo_3.png');
  background-position: center;
  background-size: center;
  background-repeat: no-repeat;
  height: 70vh;
  position: relative;
  &__car {
    background: url('../assets/auto/bmw/black.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 5%;
    text-align: center;
    height: 70%;
    width: 70%;
  }
  &__rig-left {
    position: absolute;
    left: 12.7%;
    bottom: 0;
    width: 15%;
  }
  &__rig-right {
    position: absolute;
    right: 16.5%;
    bottom: 0;
    width: 15%;
  }
}

看起来像这样，但没有响应：

分辨率高：

响应问题：

如果你能以某种方式帮助我，我将不胜感激，顺便说一句，这是我的第一个 post :)

Answer 1

将轮毂盖放在正确位置的诀窍是使用它们的位置作为图像尺寸的百分比 - 而不是直接使用设备。此外，将汽车图像用作 HTML img src，以便其尺寸设置其包含 div 的尺寸。在这种情况下，我们不能使用背景图片和封面，因为我们需要与图片成比例的所有内容。

如果需要，我们可以将轮毂盖作为背景，因为我们将使用它们的 div 尺寸。在此片段中，轮毂罩只是银色圆圈。

每张图片的轮子位置都略有不同，因此必须对每张图片进行测量，并将测量值保存在每辆车的某个位置。在此片段中，它们作为 CSS 变量保存在每辆汽车的 class（car1、car2 等）中，并完成 CSS 计算以定位它们。

body {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to bottom, white 0%, gray 100%);
}
  
.car {
  margin: 0;
  padding: 0;
  position: relative;
  width: 70%;
  height: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  top: 100%;
  background-color: pink; /* just to show that the image can be larger than the actual car */
}
.car img{
  width: 100%;
  height: auto;
}

.hubcap {
  position: absolute;
  width: calc((var(--d) / var(--w)) * 100%);
  height: calc((var(--d) / var(--h)) * 100%);
  background-color: silver; /* just as a test, change to whatever image is wanted */ 
  border-radius: 50%; /* ditto */
  border-style: solid;
}

.hubcapfront {
  bottom: calc((var(--bf) / var(--h)) * 100%);
  left: calc((var(--lf) / var(--w)) * 100%);
  transform: translateX(-50%) translateY(50%);
}

.hubcapback {
  bottom: calc((var(--bb) / var(--h)) * 100%);
  right: calc((var(--rb) / var(--w)) * 100%);
  transform: translateX(50%) translateY(50%);
}

.car1 {
 --d: 3.5;  /* diameter of wheels. Doesn't matter what units - just use the same units for all these measurements*/
 --lf: 5.5; /* distance from left edge of the image to center of front wheel  */
 --rb: 5;   /* distance from right edge of the image to center of back wheel */
 --bf: 2.7; /* distance from bottom of image to center of front wheel */
 --bb: 2.7; /* distance from bottom of image to center of back wheel */
 --w: 24;   /* width of the image */
 --h: 9;    /* height of the image */
}

<div class="car car1">
  <img src="https://i.stack.imgur.com/eug9y.png">
  <div class="hubcap hubcapfront"></div>
  <div class="hubcap hubcapback"></div>
</div>

响应式配置器的问题

Problems with responsive configurator

html

css

grid

sass

responsive