如何使嵌套在div中的图片填充页面剩余空间并正确缩放？

为什么嵌套div后图片会溢出？ #

当你把img直接放在flex容器里时，img作为替换元素，浏览器会自动根据容器的可用空间计算它的最大显示尺寸——既保持图片比例，又不会超出容器的宽高限制。

但嵌套进.image-container后，情况变了：

1. .image-container作为flex item，即使设置了flex:1占满剩余空间，它默认是块级元素，在overflow:visible（默认值）的情况下，容器的高度会被内部的img撑开。如果图片原始高度超过了flex分配给.image-container的空间，就会导致容器高度溢出，页面出现垂直滚动条。
2. 此时img没有被容器的尺寸约束，会按照自身原始尺寸（或未限制的缩放尺寸）显示，自然会撑破容器。

为什么overflow能解决问题？ #

当给.image-container设置overflow:hidden/scroll/auto时，浏览器会为这个元素创建块格式化上下文（BFC）。BFC的核心特性之一是：容器的高度不会被内部溢出的内容撑开，而是严格保持自身被分配的高度（这里就是flex布局分配的剩余空间）。

此时img的尺寸会被容器的宽高限制住，再配合max-width:100%和max-height:100%，就能实现和直接放在flex容器里一样的缩放效果。

实现等效效果的代码 #

要让嵌套div后的图片和直接放在flex容器里表现一致，只需做以下设置：

HTML #

<div class="container">
  <header>头部内容</header>
  <div class="image-container">
    <img src="your-image-path.jpg" alt="图片描述">
  </div>
</div>

CSS #

/* 重置默认边距，确保页面高度占满屏幕 */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  /* 头部固定高度，可根据需求调整 */
  height: 60px;
  background-color: #f0f0f0;
  padding: 0 16px;
}

.image-container {
  /* 占满容器剩余空间 */
  flex: 1;
  /* 建立BFC，固定容器高度 */
  overflow: hidden;
  /* 可选：让图片在容器中居中，和直接放flex容器的视觉一致 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  /* 限制图片最大尺寸不超过容器 */
  max-width: 100%;
  max-height: 100%;
  /* 保持图片比例，完整显示在容器内 */
  object-fit: contain;
}

这样设置后，.image-container里的图片会和直接放在flex容器里的效果完全相同：宽屏时左右留白，窄高屏时上下留白，不会出现溢出滚动条。

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