我有一个满是图像的div类。当我的屏幕处于全尺寸时，我将它们精确地定位在我想要的位置。但是如果我开始将屏幕最小化一点，图像开始彼此重叠并保持相同的大小。当我开始将屏幕最小化时，如何使图像保持在相对于彼此的相同位置并减小尺寸？
我知道，如果我的图像大小为100%，那么它们将能够在最小化时正确地最小化。然而，我使用的图像太大了，这就是为什么我手动设置它们的大小。即使它们是正确的大小，我仍然希望它们相对于彼此保持在相同的位置。为了说明我的目标，这里是一个网站，将最小化和正确定位他们的图像时，屏幕最小化：https://kuon.space/#top

/* Planets Styles */

.parallax {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  justify-content: center;
  margin-top: 300px; /* changed from 300px */
  padding-top: 5%;
}

.center-image {
  display: flex;
  flex-wrap: wrap;
  border: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: auto;
  z-index: 1;
  background-color: transparent;
}

.surrounding-image {
  display: flex;
  flex-wrap: wrap;
  border: none;
  position: fixed;
  width: 250px;
  height: auto;
  background-color: transparent;
  z-index: 2;
}

/* positions of surrounding stars */

.star-image {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  border: none;
  position: fixed;
  width: 50%;
  height: auto;
  background-color: transparent;
  z-index: 3;
}

.star-image:nth-of-type(1) {
  top: 27%;
  left: 63%;
}

.star-image:nth-of-type(2) {
  top: 60%;
  left: 70%;
}

.star-image:nth-of-type(3) {
  top: 22%;
  left: 44%;
}

.star-image:nth-of-type(4) {
  top: 75%;
  left: 47%;
}

.star-image:nth-of-type(5) {
  top: 45%;
  left: 26%;
}

/* positions of surrounding planets */

/*Orange with Rings*/

.planets-container .surrounding-image:nth-of-type(2) {
  top: 55%;
  left: 20%;
  width: 450px;
  height: auto;
}

/*Purple*/

.planets-container .surrounding-image:nth-of-type(3) {
  top: 15%;
  left: 50%;
}

/*Red*/

.planets-container .surrounding-image:nth-of-type(4) {
  top: 60%;
  left: 55%;
  bottom: 20%;
}

/*Orange*/

.planets-container .surrounding-image:nth-of-type(5) {
  top: 35%;
  left: 60%;
}

/*Orange and Gray*/

.planets-container .surrounding-image:nth-of-type(6) {
  top: 30%;
  left: 30%;
}

<section class="parallax">
  <img src="https://via.placeholder.com/800x500" class="center-image">

  <div class="stars-container">
    <img src="https://via.placeholder.com/800x500" data-speed="2" class="star-image">
    <img src="https://via.placeholder.com/800x500" data-speed="3" class="star-image">
    <img src="https://via.placeholder.com/800x500" data-speed="-9" class="star-image">
    <img src="https://via.placeholder.com/800x500">
    <img src="images/planets/hdstar4-removebg-preview.png" data-speed="-5" class="star-image">
  </div>

  <div class="planets-container">
    <img src="https://via.placeholder.com/800x500" data-speed="5" class="surrounding-image">
    <img src="https://via.placeholder.com/800x500" data-speed="4" class="surrounding-image">
    <img src="https://via.placeholder.com/800x500" data-speed="-4" class="surrounding-image">
    <img src="https://via.placeholder.com/800x500" data-speed="7" class="surrounding-image">
    <img src="https://via.placeholder.com/800x500" data-speed="2" class="surrounding-image">
  </div>

</section>