如何在缩小屏幕时让图片按比例缩放且保持相对位置？

我有一个包含多张图片的容器，屏幕全屏时图片位置完全符合预期，但缩小屏幕后图片会相互重叠且尺寸保持不变。我希望在缩小屏幕时，图片既能保持相对位置不变，又能同步缩小尺寸。我了解将图片尺寸设为100%可实现缩放，但所用图片尺寸过大，因此手动设置了尺寸；即便图片尺寸合适，我仍希望它们保持相对位置，参考类似响应式星空行星布局的效果。

CSS 代码 #

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

HTML 代码 #

<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>

问题核心在于使用固定单位（px）设置图片尺寸，以及fixed定位导致元素脱离文档流，无法随容器缩放同步调整位置和大小。要实现响应式缩放且保持相对位置的效果，可按以下步骤修改：

1. 改用相对单位控制尺寸 #

将图片的固定宽度（px）换成视口单位（vw），搭配最大/最小宽度限制极端尺寸，让图片随屏幕宽度同步缩放：

.center-image {
  width: 25vw; 
  max-width: 350px;
  min-width: 150px;
}

.surrounding-image {
  width: 18vw;
  max-width: 250px;
  min-width: 120px;
}

.planets-container .surrounding-image:nth-of-type(2) {
  width: 32vw;
  max-width: 450px;
  min-width: 200px;
}

2. 调整定位方式，让元素跟随容器联动 #

将fixed定位改为absolute，让元素相对于父容器.parallax定位，配合百分比top/left值维持相对位置：

.surrounding-image {
  position: absolute;
}

.star-image {
  position: absolute;
}

3. 维持容器固定宽高比例（可选） #

若希望整个行星区域保持固定比例（如16:9），可给.parallax设置padding-top实现：

.parallax {
  width: 100%;
  padding-top: 56.25%; /* 16:9比例 */
  height: 0;
  overflow: hidden;
  position: relative;
  display: block;
  align-items: unset;
  justify-content: unset;
}

效果说明 #

修改后：

• 图片尺寸随屏幕宽度自动缩放，同时限制最大/最小尺寸避免极端情况
• 所有元素基于父容器定位，百分比位置确保相对布局不变
• 固定比例容器能保持整体布局的一致性

内容的提问来源于stack exchange，提问作者Colin Maxwell