响应式配置器的问题

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>

文字：

.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%;
  }
}

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

良好的分辨率：

响应式问题：

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

Answer 1

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

如果需要，我们可以将轮毂盖作为背景放入，因为它们的 div 的尺寸将是我们使用的。在这个 sn-p 中，轮毂盖只是银色圆圈。

每张图片的轮子在其图片中的位置略有不同，因此必须对每张图片进行测量，并将测量结果保存在每辆车的某个位置。在这个 sn-p 中，它们被保存在每辆汽车的类（car1、car2 等）中，因为 CSS 变量和 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>