自动高度容器中右侧图片高度不超过左侧内容高度的实现咨询

嘿，这个问题我之前做项目时刚好遇到过，折腾了好一阵才找到顺手的解决办法，给你分享两个靠谱的思路：

方法一：CSS Grid（最简洁） #

Grid布局天生擅长这种等高单元格的场景，直接让容器的高度由左侧内容决定，右侧图片自动匹配左侧高度，完全不用额外的高度计算。

HTML结构 #

<div class="container">
  <div class="left-content">
    <!-- 这里放你的任意内容，高度会自动自适应 -->
    <p>这是左侧的示例内容，行数多少都能自动撑高容器</p>
    <p>再添加几行文字，测试下高度变化的情况...</p>
    <p>继续加内容，看看右侧图片会不会跟着限制高度</p>
  </div>
  <div class="right-image">
    <img src="你的图片路径" alt="需要展示的图片">
  </div>
</div>

CSS代码 #

.container {
  display: grid;
  /* 左侧占满剩余空间，右侧宽度自适应图片 */
  grid-template-columns: 1fr auto;
  /* 左右内容之间的间距，可根据需求调整 */
  gap: 1.5rem;
  /* 可选：给容器加个边框方便查看范围 */
  border: 1px solid #eee;
}

.right-image img {
  /* 图片最大高度不超过所在单元格的高度（也就是左侧内容的高度） */
  max-height: 100%;
  /* 保持图片原始宽高比，避免拉伸变形 */
  width: auto;
  /* 可选：如果图片比例和单元格不匹配，用contain让图片完整显示，不会被裁剪 */
  object-fit: contain;
}

原理：Grid布局中同一行的所有单元格高度会自动对齐，容器的高度由左侧内容的高度决定，右侧单元格会自动匹配这个高度，图片设置max-height: 100%就会被限制在这个高度内，完美符合你的需求。

方法二：Flexbox（更灵活） #

如果你的布局需要更复杂的弹性调整，Flexbox也是个不错的选择，核心思路是让右侧容器的高度和左侧内容保持一致，再限制图片的最大高度。

CSS代码（HTML结构和上面一致） #

.container {
  display: flex;
  /* 让左右容器高度自动对齐（默认就是stretch，可省略） */
  align-items: stretch;
  gap: 1.5rem;
  border: 1px solid #eee;
}

.left-content {
  /* 左侧占满剩余空间，可根据需求调整 */
  flex: 1;
}

.right-image {
  /* 让右侧容器高度继承自父容器（也就是左侧内容的高度） */
  height: 100%;
}

.right-image img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

这个方法和Grid的效果一致，只是用Flex的方式实现，适合已经在用Flex布局的场景。

额外说明 #

• 如果希望图片超出左侧高度时被裁剪而不是缩小，把object-fit: contain改成object-fit: cover即可，同时可以加上overflow: hidden在右侧容器上。
• 两种方法都不需要JavaScript计算高度，纯CSS就能实现完全响应式的效果，不管左侧内容怎么变化，右侧图片都会自动适配高度。

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