如何防止flex容器内的图片高度超出容器？

你的需求是在固定高度容器内放置图片和辅助UI，确保整体不溢出，同时图片完整显示并最大化尺寸。原代码的问题在于未给图片分配容器内的可用空间，导致原始图片尺寸撑破容器。

修改后的完整代码：

<div class="box">
  <img src="http://placekitten.com/1600/2000">
  <div class="buttons">
    <button>one</button>
    <button>two</button>
    <button>three</button>
  </div>
</div>

<style>
  html, body {
    margin: 0;
    padding: 0;
  }
  .box {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden; /* 阻止内容溢出容器 */
  }
  img {
    flex: 1; /* 占据容器扣除按钮区域后的全部可用高度 */
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持图片比例完整，最大化显示 */
  }
  .buttons {
    padding: 1rem;
    background: #fff;
  }
</style>

核心修改点： #

• .box添加overflow: hidden：确保容器内所有内容都被限制在100vh高度内，不会向外溢出。
• img设置flex: 1：在垂直flex布局中，这个属性让图片自动填充容器除按钮外的剩余空间，既不会挤压按钮，也不会被按钮占用空间。
• img设置width: 100%+height: 100%+object-fit: contain：让图片填充分配到的空间，同时保持原始比例完整显示，不会拉伸变形，且尽可能最大化尺寸。

调整后，图片会始终在容器内完整展示，按钮区域保持自身高度，整个容器严格控制在100vh高度内，完全符合你的需求。

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