切换flex-direction时object-fit: cover失效问题排查

问题出在移动端flex-direction: column布局下，.imagestage的高度被内部图片撑开，导致object-fit: cover无法生效：

• 宽屏row布局时，.imagestage的宽度由flex:1约束，图片的width:100%会填充容器宽度，object-fit: cover可以正常裁剪左右边缘。
• 移动端column布局时，.imagestage作为flex子项，默认会被内部内容（图片）撑开高度，此时图片的height:100%等于自身原始高度，容器和图片高度一致，object-fit: cover失去裁剪作用，表现为类似contain的缩放。

修复方案 #

修改.imagestage和.fit的样式，强制容器尺寸由flex布局约束，而非内容撑开：

.imagestage {
  flex: 1 1 0%; /* 明确flex-basis为0%，让容器占据main的剩余空间 */
  display: flex;
  align-items: center;
  overflow: hidden; /* 隐藏图片超出容器的部分 */
}

.fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

关键修改说明 #

1. flex: 1 1 0%：替代原来的flex:1，明确设置flex-basis:0%，让.imagestage的初始尺寸为0，完全由flex布局分配空间，避免被内部图片撑开高度。
2. overflow: hidden：确保图片超出容器上下边缘的部分被裁剪，符合需求。

如果不需要flex居中图片，也可以改用绝对定位的方式，效果更直接：

.imagestage {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.fit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

修改后的完整CSS代码 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
}

.body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header {
  display: flex;
  min-height: 5vh;
}

main {
  display: flex;
  flex-direction: row-reverse;
  flex: 1;
}

footer {
  display: flex;
  min-height: 5vh;
}

.imagestage {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.textstage {
  flex: 1;
  order: 1; /* put the textstage on the left */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {
  /* mobile layout */
  main {
    flex-direction: column;
  }
}

/* PREVIEW COLOURS AND STYLING */
.body {
  text-align: center;
  font-size: 40px;
}
header {
  background-color: rgb(38, 74, 74);
}
.imagestage {
  background-color: rgb(56, 56, 112);
}
.textstage {
  background-color: rgb(96, 34, 34);
}
footer {
  background-color: rgb(91, 65, 32);
}

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