如何使post-img容器内图片高度不超过同级content容器高度？

嘿，我来帮你搞定这个困扰！你遇到的问题很典型，通常是因为没给图片和它的父容器设置正确的高度约束，或者缺少明确的高度上下文导致的。下面给你两种常见场景的解决方案：

场景1：.content有固定高度（或继承明确高度） #

如果你的.content容器是固定高度（比如设置了height、min-height，或者从父元素继承了确定的高度），可以这样设置：

/* 先确保.content有明确的高度基准 */
.content {
  height: 500px; /* 示例固定高度，可根据需求调整 */
  /* 可选：如果容器内容过多需要滚动，添加 overflow: auto; */
}

/* 让.post-img占满.content的高度，超出部分隐藏 */
.post-img {
  height: 100%;
  overflow: hidden;
}

/* 约束图片高度不超过父容器，同时保持比例 */
.post-img img {
  max-height: 100%;
  width: auto; /* 防止图片被拉伸变形 */
  /* 如果你想让图片填满容器且保持比例不变形，可以替换成： */
  /* object-fit: cover; */
}

场景2：.content是自适应高度（由内部内容撑开） #

如果.content的高度是由其他内容（比如文字、按钮）撑开的，推荐用Flex布局来确保图片不会超出容器高度：

.content {
  display: flex;
  flex-direction: column;
  /* 可选：设置最大高度，避免容器过高 */
  max-height: 80vh;
}

.post-img {
  flex: 0 0 auto; /* 禁止容器被拉伸，保持自身高度 */
  max-height: 100%;
  overflow: hidden;
}

.post-img img {
  max-height: 100%;
  width: auto;
}

为什么之前的设置可能失效？ #

• 你可能没给.post-img设置height: 100%，导致它无法继承.content的高度；
• 图片本身被设置了固定的height值，覆盖了max-height的约束；
• .content没有明确的高度上下文（比如父元素高度为auto且没有其他内容撑开），导致它的高度为0，图片自然会超出。

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