如何让左侧图片自适应右侧内容，占满容器全部高度？

希望左侧图片无论右侧内容量多少，都能占满容器的整个高度，将视口调整至850px或更小可复现问题。

原代码 #

HTML #

<div class="flex-container">
  <div class="item-1">
    <div class="item-1-direct-child">
      <img src="https://picsum.photos/200/300" />
    </div>
  </div>
  <div class="item-2">
    <div class="item-2-direct-child">
      <h4>Headline</h4>
      <span>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <div class="button-container">
        <a>
          <button>
          Button
          </button>
        </a>
      </div>
    </div>
  </div>
</div>

CSS #

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  width: 100%;
  line-height: 1.5;
  font-size: 0.9rem;
}

.item-1 {
  max-height: 100%;
  width: auto;
  flex-basis: 25%;
  flex-grow: 0;
  max-width: 25%;
  background-color: lightblue;
}

.item-1-direct-child {
  min-height: 100%;
}

img {
  max-height: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  object-fit: cover;
  min-height: 187px;
}

.item-2 {
  flex-basis: 75%;
  flex-grow: 0;
  max-width: 75%;
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container>a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}

解决方案 #

要实现左侧图片占满容器高度，需调整以下关键样式：

1. 让左侧图片容器成为flex容器，强制子元素填满高度
2. 调整图片高度设置，确保其填满父容器

修改后的CSS代码：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: purple;
  width: 100%;
  line-height: 1.5;
  font-size: 0.9rem;
  /* 确保flex项默认拉伸，flex默认值为stretch，此属性可选 */
  align-items: stretch;
}

.item-1 {
  /* 移除max-height限制，改为flex容器 */
  display: flex;
  width: auto;
  flex-basis: 25%;
  flex-grow: 0;
  max-width: 25%;
  background-color: lightblue;
}

.item-1-direct-child {
  /* 让子容器填满父元素高度 */
  flex: 1;
}

img {
  /* 移除max-height，设置height:100%确保填满容器 */
  height: 100%;
  display: block;
  width: 100%;
  object-fit: cover;
  /* 保留min-height防止内容过少时图片过矮 */
  min-height: 187px;
}

/* 以下样式保持不变 */
.item-2 {
  flex-basis: 75%;
  flex-grow: 0;
  max-width: 75%;
  background-color: orange;
}

.item-2-direct-child {
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 24px;
}

h4 {
  margin: 0px;
  margin-bottom: 20px;
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.button-container>a {
  text-decoration: none;
}

button {
  margin-top: 25px;
}

修改说明 #

• .item-1设置display:flex后，其子元素会自动拉伸至父元素高度，配合item-1-direct-child的flex:1，确保子容器完全填满.item-1的高度
• 图片设置height:100%+object-fit:cover，既保证填满容器高度，又避免图片变形
• 移除.item-1的max-height:100%，消除高度限制，让容器能随右侧内容拉伸

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