嵌套Div中img的max-height:100%不生效，如何用CSS解决？

你遇到的这个问题其实是CSS里max-height: 100%的一个常见坑——宽度方向的约束能正常生效，但高度方向就“失灵”了。咱们先拆解一下原因，再给你几个纯CSS的解决方案。

问题根源 #

max-height: 100%生效的前提是：父元素必须有明确的高度约束（不是由内容撑开的高度）。你的代码里：

• .grid-container确实有固定的height: 200px，没问题；
• 但中间的.image-container只设置了max-height: 100%，它本身的高度是由内部的图片撑开的（因为块级元素默认高度由内容决定）；
• 这时候图片的max-height: 100%其实是在参照.image-container被图片撑开的高度，自然就会超出.grid-container的范围。

而宽度方向能正常工作，是因为块级元素的默认宽度是auto，会自动填满父容器的宽度，所以.image-container的宽度默认就是200px，图片的max-width:100%有了明确的参照。

解决方案 #

下面几种方法都能解决这个问题，你可以根据自己的场景选择：

方法1：给中间容器设置height: 100% #

最简单的方式，直接让.image-container继承父容器的固定高度，这样图片的max-height:100%就有了正确的参照：

/* page grid element- has fixed height and width */
.grid-container {
  width: 200px;
  height: 200px;
  background-color: green;
}

/* Image container - required for some purposes, must not exceed container size */
.image-container {
  outline: 5px solid red;
  max-width: 100%;
  height: 100%; /* 替换max-height为height */
  overflow: hidden; /* 可选：如果图片超出就隐藏，避免溢出 */
}

/* image must not exceed it's container */
img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

方法2：用Flexbox布局让中间容器自动填充空间 #

如果不想给.image-container硬设高度，可以用Flexbox让它自动占满父容器的空间，同时保持灵活性：

/* page grid element- has fixed height and width */
.grid-container {
  width: 200px;
  height: 200px;
  background-color: green;
  display: flex; /* 开启Flex布局 */
}

/* Image container - required for some purposes, must not exceed container size */
.image-container {
  outline: 5px solid red;
  max-width: 100%;
  flex: 1; /* 让容器自动填充剩余空间 */
}

/* image must not exceed it's container */
img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain; /* 可选：保持图片比例，避免拉伸 */
}

Flex布局下，.image-container会自动继承父容器的高度，图片的max-height就能正确约束。

方法3：用绝对定位让中间容器占满父容器 #

如果需要中间容器脱离文档流，可以用绝对定位的方式：

/* page grid element- has fixed height and width */
.grid-container {
  width: 200px;
  height: 200px;
  background-color: green;
  position: relative; /* 设置相对定位作为参照 */
}

/* Image container - required for some purposes, must not exceed container size */
.image-container {
  outline: 5px solid red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 让容器占满父容器的所有空间 */
}

/* image must not exceed it's container */
img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

验证效果 #

修改后的代码里，不管图片是高大于宽还是宽大于高，都能被限制在.grid-container的200px范围内，同时保持图片的比例。

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