如何让flex容器中的div保持固定宽高比？

问题根源 #

你的圆形图片在水平调整窗口时变形，核心原因是.roundimage元素缺少明确的尺寸约束，仅靠aspect-ratio:1/1无法在flex布局的水平方向上稳定维持正方形比例，加上原定位方式干扰了flex布局的自适应逻辑。

修复方案 #

1. 给圆形图片添加尺寸约束

修改.roundimage的CSS，添加宽高限制确保比例稳定：

.roundimage {
  aspect-ratio: 1/1 !important;
  border-radius: 50%;
  border: 2px solid #222D3E;
  background-size: cover;
  background-position: center;
  min-height: 0;
  min-width: 0;
  /* 新增样式 */
  max-width: 100%;
  max-height: 100%;
  width: 100%;
}

2. 优化父容器布局逻辑

移除.roundin内的绝对定位代码，改用flex布局实现居中，避免定位导致的尺寸溢出：

.roundin {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 删除以下冗余代码 */
.roundin div {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

效果说明 #

修改后，圆形图片会在父容器的可用空间内自动适配，同时严格维持1:1的宽高比例，无论水平还是垂直调整窗口大小，都能保持完美圆形，不会出现挤压变形的情况。

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