CSS问题：调整窗口大小时相框内的角色图标溢出相框如何解决

问题根因 #

当前布局的核心问题是父容器没有做定位约束，#frm使用fixed定位脱离了正常文档流，#icon使用relative定位是相对于自身原本的文档流位置偏移，窗口缩放时两者的位置对齐逻辑断裂，才会出现图标跑出相框的问题。

修复方案 #

你不需要修改现有HTML代码，只需替换原有CSS即可：

/* 父容器作为整体定位基准，固定在右上角 */
.frame {
  position: fixed;
  top: 20px; /* 可自行调整距离顶部的间距 */
  right: 20px; /* 可自行调整距离右侧的间距 */
  width: 200px;
  height: 200px;
  /* 响应式适配：小屏幕下自动缩小，避免占满屏幕 */
  max-width: 25vw;
  max-height: 25vw;
}

/* 相框相对于父容器定位，撑满整个父容器 */
#frm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* 保证相框叠在头像上层 */
}

/* 头像相对于父容器居中定位 */
#icon {
  position: absolute;
  top: 12.5%;
  left: 12.5%;
  width: 75%;
  height: 75%;
  z-index: 1;
  object-fit: cover; /* 避免头像拉伸变形 */
}

修复逻辑说明 #

• 将相框和头像的组合作为一个整体固定在页面右上角，内部元素全部相对于父容器定位，两者的相对位置和比例完全绑定，不会因为窗口缩放出现错位
• 所有尺寸使用百分比适配，配合父容器的max-width限制，在小屏幕下会自动等比缩放，不会溢出屏幕也不会错位
• z-index控制叠放顺序，保证相框中间透明区域刚好露出下方的头像，符合你原本的设计需求

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