当使用 Flex 布局时，.image-container 可能因默认伸缩行为导致宽度远超其内部 元素，本文提供一种简洁可靠的 CSS 方案，通过 inline-block + block 组合与约束性尺寸控制，使父容器精准包裹图片，同时兼顾响应式与视口高度限制。
当使用 flex 布局时，`.image-container` 可能因默认伸缩行为导致宽度远超其内部 `` 元素，本文提供一种简洁可靠的 css 方案，通过 `inline-block` + `block` 组合与约束性尺寸控制，使父容器精准包裹图片，同时兼顾响应式与视口高度限制。
在 Flex 容器中，子项（如 .image-container）默认具有 min-width: auto 和 min-height: auto 行为，这会导致即使内部仅含一张图片，父容器仍可能拉伸至主轴（此处为水平方向）可用空间的全部宽度——尤其当父级 .container 是 flex-direction: column 且未显式限制宽度时，.image-container 会“继承”父容器的宽度过大。
根本原因在于：Flex 项默认不会自动收缩以适应内容（shrink-to-fit），除非明确禁用弹性增长或改变显示模式。
✅ 推荐解决方案是将 .image-container 设为 display: inline-block，并确保其子元素 为 display: block：
.image-container {
display: inline-block; /* 关键：脱离 flex 项默认伸缩逻辑，回归内容自适应 */
background-color: blue;
vertical-align: top; /* 可选：避免基线对齐产生的底部空隙 */
}
.image {
display: block; /* 消除 img 默认 inline 基线间隙 */
max-width: 100%; /* 响应式兜底：不超父容器宽度 */
width: 250px; /* 显式设定基准宽度（可替换为 rem/vw/% 等） */
height: auto; /* 保持宽高比，避免失真 */
}
⚠️ 注意事项：
- 若需严格限制整体高度不超过视口（如题中要求“height not exceed window height”），应在 .image-container 或 .image 上添加 max-height: 100vh 并配合 object-fit: contain（适用于
）；
- 避免对 .image-container 设置 flex: 1、flex-grow: 1 或无约束的 width: 100%，否则将重新触发过度拉伸；
- 在现代布局中，也可考虑用 aspect-ratio + contain 替代固定宽高，提升响应能力（需浏览器支持）；
- 如必须保留 .image-container 为 display: flex，则需显式设置 flex-shrink: 1、min-width: 0、width: fit-content，但兼容性与复杂度更高，inline-block 方案更轻量可靠。
最终效果：.image-container 宽高完全由 决定，无额外空白，可安全嵌套于任意 Flex 或 Grid 布局中，兼具语义清晰性与样式可控性。
