Flex布局下image-container宽度超出子元素img的问题解决

要让image-container与内部图片宽高一致（呈正方形），且高度不超出窗口高度，同时解决容器宽度过大的问题，可按以下方式调整CSS：

首先修正容器盒模型，避免padding撑高容器，再给image-container强制宽高比、限制最大高度，最后让图片自适应容器：

html,body,#root {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: start;
  height: 100%;
  box-sizing: border-box; /* 让padding包含在容器高度内，避免超出窗口 */
  background-color: orange;
  padding: 10px;
}

.image-container {
  aspect-ratio: 1/1; /* 强制宽高1:1，实现正方形 */
  max-height: calc(100% - 20px); /* 减去上下padding，确保高度不超窗口 */
  width: fit-content; /* 宽度匹配内容/高度，避免过度拉伸 */
  display: flex;
  min-height: 0;
  background-color: blue;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例，完整显示在正方形内；若需填充容器可改用cover */
}

关键调整说明： #

• box-sizing: border-box：确保.container的padding不会额外增加总高度，避免超出窗口100%高度限制。
• aspect-ratio:1/1：直接让image-container保持正方形，无需手动计算宽高。
• max-height: calc(100% - 20px)：扣除上下各10px的padding，保证容器高度不超出窗口可用空间。
• width: fit-content：限制image-container宽度不会过度拉伸，仅匹配自身高度（因aspect-ratio）或图片宽度。
• object-fit: contain：让图片在正方形容器内完整显示，同时保持原有比例。

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