两列布局图片自适应：保持宽高比且不超出容器高度问题求助

问题核心是当前仅设置了图片宽度自适应，但未限制其最大高度，导致容器高度缩小时图片不会随之调整。以下是修正后的代码和思路：

修正后的CSS #

.outer-container {
  display: flex;
  background-color: green;
  height: calc(100vh - 100px);
  overflow: hidden; /* 防止图片超出容器时出现滚动条 */
  gap: 8px; /* 可选：列之间的间距 */
}

.left-column {
  flex: 1; /* 让左右列平分可用宽度，可按需调整比例 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* 强制列高度与容器一致 */
}

.right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 可选：两张图片之间的间距 */
  height: 100%;
}

.left-image, .right-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 保持图片宽高比，完整显示在容器内 */
}

/* 如果需要让图片尽可能填满容器（允许裁剪），可将object-fit改为cover */

修正后的HTML #

<div class="outer-container">
  <div class="left-column">
    <img class="left-image" src="https://via.placeholder.com/200x500/333300">
  </div>
  
  <div class="right-column">
    <img class="right-image" src="https://via.placeholder.com/500X250/33000">
    <img class="right-image" src="https://via.placeholder.com/500x250/003300">
  </div>
</div>

关键调整点 #

• 给左右列添加flex:1和height:100%，确保它们完全填充容器的宽高空间
• 给图片设置max-width:100%和max-height:100%，限制图片不会超出父容器边界
• 使用object-fit:contain保证图片始终保持原有宽高比，完整显示在容器内（若需要填满容器可改用cover）
• 容器添加overflow:hidden，避免图片超出时出现滚动条

调整后，无论调整浏览器宽度还是高度，图片都会自动缩放适配容器，同时保持宽高比，不会超出容器范围。

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