子图片导致父div超出视口，求适配解决方案（附代码）

问题背景 #

添加marshero.jpg后，父容器高度超出视口；移除该图片后页面显示正常。需求是让图片高度适配父容器，同时保证父容器不超出视口范围。

修复方案及代码 #

修改CSS如下：

div.mars {
  height: 100vh; /* 替换min-height，固定容器为视口高度 */
  overflow: hidden; /* 隐藏容器内超出的内容 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: inherit;
}

div.martian {
  flex: 1; /* 简化flex属性，让该容器占满剩余空间 */
  height: 100%;
  overflow: hidden; /* 限制图片容器高度，隐藏超出部分 */
}

img.mars {
  max-width: 100%;
  height: 100%; /* 让图片高度填满父容器 */
  object-fit: contain; /* 保持图片比例，完整显示在容器内 */
}

/* nav 样式保持不变 */
nav.menu {
  background-color: #f9eae2;
  padding: 16px;
  @media only screen and (max-width: 1050px) {
    padding: 0px;
  }
}

ul.inline {
  text-align: center;
  @media only screen and (max-width: 1050px) {
    text-align: left;
  }
}

li.inline {
  display: inline;
  padding-left: 16px;
  @media only screen and (max-width: 1050px) {
    display:list-item;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

HTML无需修改，保持原有结构即可。

关键修改说明 #

1. 固定父容器高度：将.mars的min-height:100vh改为height:100vh，确保容器高度严格等于视口，不会被内部内容撑开；同时添加overflow:hidden防止容器外出现滚动条。
2. 限制图片容器高度：给.martian添加height:100%和overflow:hidden，让它继承父容器的高度，避免图片撑开这个中间容器。
3. 图片适配调整：将图片的height:auto改为height:100%，配合object-fit:contain，让图片按比例填满容器且完整显示，不会超出容器范围。

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