使用align-items:center时子Flexbox元素异常放大的问题求助

问题原因 #

给.modal设置align-items: center后，flex子元素.autres-vues不再默认拉伸至容器高度（align-items: stretch时的默认行为），其高度由内部内容决定。但.vignette-autres-vues的height: 18%是相对最近的有明确高度的祖先元素计算的——也就是.modal的85%视口高度，而非.autres-vues的内容高度，最终导致图片被异常放大。

修复方案 #

方案1：给.autres-vues设置明确高度 #

让图片的百分比高度基于该容器计算，推荐和右侧主图高度保持一致：

.autres-vues {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80%; /* 与.image-affichee高度匹配 */
}

方案2：固定图片高度或限制最大高度 #

如果不需要百分比高度，改用固定值并保持图片比例：

.vignette-autres-vues {
  /* height: 18%; */
  max-height: 100px; /* 根据需求调整数值 */
  width: auto;
  margin: 1rem 4rem;
  object-fit: contain; /* 防止图片变形 */
}

方案3：让.autres-vues重新拉伸至容器高度 #

通过align-self: stretch恢复默认拉伸行为，确保图片百分比高度基于自身容器：

.autres-vues {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}

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