Problems with responsive configurator

Question

I'm having a problem with making a responsive hubcap configurator. I don't know how to deal with it. I was trying to make it with CSS grid, but every time I was changing size of the site, my tires weren't fitting perfectly to their places. I was thinking about something like this:

But unfortunately it doesn't work.

Right now I'm trying to make it with position relative and absolute, but it still doesn't work.

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

and it looks like this, but it's no responsive:

In good resolution:

Issue with responsive:

I would be really appreciate if you could somehow help me, btw it's my first post :)

Answer 1

The trick to getting the hubcaps in the right place is to use their positions as percentages of the dimensions of the image - not directly of the device. Also, use the image of the car as an HTML img src so that its dimensions set the dimensions of its containing div. We can't use a background image and cover in this case as we need everything proportional to the image.

We can put the hubcaps in as backgrounds if desired as the dimensions of their divs will be what we use. In this snippet the hubcaps are just silver circles.

Each image will have its wheels in slightly different places within its image so each image will have to be measured and the measurements kept somewhere for each car. in this snippet they are kept in each car's class (car1, car2 etc) as CSS variables and CSS calcs are done to get them positioned.

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.sstatic.net/eug9y.png">
  <div class="hubcap hubcapfront"></div>
  <div class="hubcap hubcapback"></div>
</div>