CSS艺术眼睛适配问题求助：屏幕缩放时瞳孔错位偏移

问题根源 #

1. 结构层级错误：瞳孔(.pupil)被放在眼睛容器(.eye-outline)外部，使用relative定位时参照的是自身初始位置而非眼睛主体，缩放时必然错位。
2. 固定像素尺寸：所有元素用固定px设置宽高，屏幕缩放时无法保持比例一致性。
3. 定位方式不精准：用百分比top/left定位时，不同元素的计算基准（父容器宽高）不一致，导致缩放时偏移量比例混乱。

解决方案 #

1. 修正DOM结构：将所有眼部子元素（眼白、虹膜轮廓、虹膜、瞳孔）嵌套在.eye-outline内部，确保层级关系统一。
2. 使用相对单位：用vw（视窗宽度百分比）或百分比设置宽高，结合calc维持原宽高比，保证缩放时整体比例不变。
3. 精准定位：父容器设为position: relative，子元素用position: absolute配合transform: translate(-50%, -50%)实现完美居中，避免百分比计算误差。

修改后的完整代码 #

HTML

<a href="index.html">back</a>
<main>
  <h1>eye</h1>
</main>

<div class="eye-outline">
  <div class="eye-white"></div>
  <div class="iris-container">
    <div class="iris-outline"></div>
    <div class="iris">
      <div class="pupil"></div>
    </div>
  </div>
</div>

CSS

body {
  background-color: grey;
  margin: 0;
  padding: 20px;
}

.eye-outline {
  /* 用vw做单位，随屏幕宽度自适应 */
  width: 60vw;
  max-width: 600px;
  /* 用calc维持原宽高比350:600 */
  height: calc(60vw * 350 / 600);
  max-height: 350px;
  background-color: black;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.eye-white {
  /* 基于父容器的百分比尺寸，保持原比例 */
  width: 96.67%;
  height: 94.29%;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 平移实现精准居中 */
  transform: translate(-50%, -50%);
}

.iris-container {
  width: 54.17%;
  height: 92.86%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.iris-outline {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
}

.iris {
  width: 92.31%;
  height: 92.31%;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* flex布局直接让瞳孔居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pupil {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: black;
}

关键改动说明 #

• 所有眼部元素嵌套在.eye-outline内，确保定位参照统一为眼睛主体。
• 用vw和百分比设置尺寸，结合calc维持原宽高比，缩放时整体比例完全同步。
• 用position: absolute+transform: translate(-50%, -50%)实现无误差居中，替代易出问题的百分比top/left。
• 瞳孔放在虹膜内部，通过flex布局直接居中，无需复杂定位计算。

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