CSS如何实现未知尺寸父容器内图片自适应，不使用背景图不改HTML

解决方案 #

核心问题出在flex布局的默认特性：列方向flex容器的子元素默认min-height: auto，意味着子元素的高度不会小于内部内容的高度，你给#media-wrapper设置的flex-shrink:1因此无法生效，会被图片撑大，导致#media-insert的高度被内容撑开，图片的max-height: 100%没有可参考的父容器高度阈值，自然失效。

你只需要添加一行CSS规则即可解决问题，无需修改HTML结构，也完全兼容后续替换为视频的需求：

#media-wrapper {
  /* 原有规则保留 */
  min-height: 0;
}

如果担心后续插入其他内容出现溢出，也可以给#media-insert加一条溢出隐藏规则：

#media-wrapper #media-insert {
  /* 原有规则保留 */
  overflow: hidden;
}

修改后完整的CSS如下：

* {
  box-sizing: border-box;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#media-description {
  flex-shrink: 0;
  flex-grow: 0;
}

#media-wrapper {
  flex-shrink: 1;
  flex-grow: 1;
  /* 新增规则 */
  min-height: 0;
}

#media-wrapper #media-insert {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可选新增规则，防止内容溢出 */
  overflow: hidden;
}

#media-wrapper #media-insert img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/***** debug *****/

main {
  border: 5px solid red;
  width: 350px;
  height: 500px;
}

#media-wrapper {
  border: 5px solid green;
}

#media-insert {
  border: 5px solid lightgreen;
}

#media-description {
  border: 5px solid blue;
}

修改后效果完全符合你的预期：

• 图片尺寸大于容器时，自动等比缩放适配容器大小，不会撑大父容器
• 图片尺寸小于容器时，保持原始尺寸居中显示
• 后续替换为视频时，只需给video标签添加同样的max-width: 100%、max-height: 100%规则即可复用布局逻辑

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