Angular FlexLayout中图片占用剩余空间的布局问题

布局需求为：左侧50%容器放置内容，右侧50%容器采用垂直布局，底部固定展示说明文本，上方图片自适应占用剩余空间。但添加图片后，图片外层div会被图片原始尺寸撑开破坏布局，移除图片时布局恢复正常。

解决方案 #

给图片外层容器添加height: 0; min-height: 100%;样式，同时给图片设置width: 100%; height: 100%; object-fit: contain;，确保图片自适应容器空间且保持比例。

修改后的代码示例 #

<div fxLayout="row" style="height: 100%; border: 1px solid green">
  <div fxFlex="50" style="border: 1px solid red"></div>
  <div fxFlex="50" style="border: 1px solid red; overflow: hidden; padding: 1rem" fxLayout="column" fxLayoutGap="1rem">
    <!-- 图片外层容器添加height:0和min-height:100% -->
    <div fxFlex style="max-width: 100%; height: 0; min-height: 100%; border: 1px solid blue">
      <!-- 图片设置宽高100%和object-fit -->
      <img src="assets/images/demo.svg" style="width: 100%; height: 100%; object-fit: contain;" />
    </div>
    <div>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
      est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
      labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
      accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
      ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
      sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

原理说明 #

• height: 0：强制图片外层容器忽略图片自身尺寸，严格遵守Flex布局分配的剩余空间。
• min-height: 100%：确保容器填满Flex分配的全部空间，避免出现空白。
• object-fit: contain：让图片在容器内自适应缩放，保持原始比例同时完整显示图片内容（若需填满容器可改用object-fit: cover）。

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