如何让图片适配Div容器且避免页面高度拉伸与滚动？

问题描述 #

我正在制作一款带有导航按钮、侧边栏和底部缩略栏的全屏图片查看器，尝试使用object-fit: scale-down属性让图片适配其容器div。该属性在宽度方向生效，但高度方向未达预期：它会挤压底部缩略栏区域，甚至导致页面向下滚动，而非按预期调整图片尺寸，同时图片上下还会出现大量不必要的空白。

演示中我将bottom div设置为height: 150px，但实际希望该div根据内容取最小高度，以给图片留出最大空间。

问题根源与解决方案 #

核心问题在于图片容器和图片的尺寸约束逻辑错误，导致图片撑开父容器，破坏了全屏布局的空间分配。以下是修正后的代码和关键调整说明：

修正后的CSS代码 #

body {
  padding: 0;
  margin: 0; /* 消除body默认margin，避免页面滚动 */
  background-color: black;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止容器内容溢出导致页面滚动 */
}

.top {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden; /* 限制top区域不会超出容器高度 */
}

.image_viewer {
  flex: 1;
  width: 80%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 确保image_viewer内部内容不会溢出 */
}

.image_container {
  flex: 1;
  display: flex; /* 让图片在容器内居中并正确适配 */
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 防止图片撑开容器 */
}

.image_container img {
  max-width: 100%; /* 用max-width/max-height替代固定宽高，让图片自适应容器 */
  max-height: 100%;
  object-fit: scale-down;
}

.controls {
  background-color: red;
  color: white;
  text-align: center;
}

.sidebar {
  width: 20%;
  background-color: blue;
  color: white;
}

.bottom {
  /* 移除固定height，改为自适应内容高度 */
  background-color: green;
  text-align: center;
}

关键调整说明 #

1. 消除页面默认边距：给body添加margin:0，避免默认边距导致容器超出视口。
2. 限制容器溢出：给container、top、image_viewer添加overflow:hidden，确保所有内容都在100vh的全屏范围内，不会触发页面滚动。
3. 优化图片容器布局：将image_container设置为flex容器，配合justify-content和align-items让图片居中，同时用overflow:hidden防止图片撑开容器。
4. 修正图片尺寸约束：把图片的固定width:100%;height:100%改为max-width:100%;max-height:100%，这样图片会根据容器的可用空间自动缩放，同时保留object-fit:scale-down的适配逻辑，避免挤压其他布局元素。
5. 底部栏自适应高度：移除bottom的固定height，让它根据内部内容自动调整高度，top区域通过flex:1占据剩余的全屏空间，最大化图片显示区域。

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