如何让图片适配在占满视口的div容器内而不溢出？

问题根因 #

溢出问题主要由4个常见布局误区导致：

• 默认content-box盒模型下，container的padding会额外增加元素总高度，导致本身100%高度的容器直接溢出视口
• 父容器没有做高度限制，原始尺寸过大的图片会直接撑开父元素
• 弹性布局没有配置纵向高度分配规则，无法自动适配剩余视口空间
• row设置了flex-wrap: wrap，窗口宽度不足时会触发换行导致高度溢出

修复方案 #

直接替换原有CSS代码为如下内容即可实现需求：

/* 全局统一盒模型，避免padding撑大容器 */
* {
  box-sizing: border-box;
}

.navbar {
  display: flex;
}

.navbar > p {
  padding: 3px;
  margin: 0; /* 清除p标签默认外边距避免额外高度 */
}

.container {
  /* 直接占满整个视口高度，采用纵向弹性布局分配内部元素高度 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: yellow;
  padding: 10px;
}

.row {
  display: flex;
  /* flex:1 自动填充导航栏之外的所有剩余高度 */
  flex: 1;
  background-color: red;
  overflow: hidden; /* 避免内部元素超出时溢出容器 */
}

.col {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图片自适应规则，限制最大宽高不超过父容器，保持原图比例 */
.col img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

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

修改后容器会完全占满视口，导航栏固定在顶部，图片会自适应右侧列的尺寸不会超出视口范围。

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