通过使用相对单位（如百分比）设置图片宽度并配合 `height: auto`，可实现图片随视口缩放而等比缩放，同时结合 css 定位与响应式布局技巧，确保多图间的相对空间关系在不同屏幕尺寸下稳定保持。
在构建具有视觉层次感的响应式页面（例如天文主题的行星环绕动效页）时，常需将多张图片精确定位在页面特定坐标上，并要求它们在屏幕缩小时整体协调缩放、不重叠、不溢出、相对位置恒定。仅用固定像素（如 width: 350px）定义尺寸会导致图片在小屏下“硬挤”，破坏布局——这正是原问题中图像重叠的根本原因。
✅ 正确做法：用相对单位 + 自适应高 + 容器约束
核心原则是：让图片尺寸脱离绝对像素依赖，转而锚定于其父容器或视口，并通过 transform 或 position 维持定位逻辑的可伸缩性。
1. 基础响应式图片样式
.responsive-img {
width: 100%; /* 相对于父容器宽度 */
height: auto; /* 保持原始宽高比 */
max-width: 100%; /* 防止超父容器（重要！）*/
}
⚠️ 注意：width: 100% 本身不生效，除非其父容器有明确宽度（如 div 设置了 width 或 max-width）。因此，需为每个图片容器（如 .center-image, .surrounding-image）添加响应式约束：
.center-image,
.surrounding-image,
.star-image {
width: 25vw; /* 推荐：用 vw/vh 替代 px，直接基于视口比例 */
height: auto;
max-width: 350px; /* 可选：设定大屏上限，防过度拉伸 */
}
/* 对于中心图，保留 transform 居中逻辑，它天然响应式 */
.center-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2. 定位策略升级：用 vw/vh 替代 px 坐标
原 CSS 中 top: 55%; left: 20% 等虽已是百分比，但若父容器未设高度/宽度，% 可能失效。更稳健的方式是统一使用视口单位（vw/vh）定义偏移：
