Flexbox中因图片导致列无法随窗口尺寸自适应的问题

正在构建一个两列布局的登录着陆页（尚未完成），每列包含图片与文本。窗口全屏时显示正常，但窗口缩小后页面不再保持两列布局。需求是无论窗口尺寸如何，始终保持两列布局，且图片能随窗口按比例缩放。尝试过设置max-height和max-width但未解决问题，移除图片或使用正方形图片时，列能正常随窗口调整尺寸。

页面展示效果 #

• 全屏窗口视图
  
• 中等窗口视图
  
• 最小窗口视图
  

当前代码 #

CSS 代码

.center-img-half {
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 50%;
}

.center-div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

.black-white-button {
  background-color: black;
  color: white;
  border-radius: 10px;
  font-family: 'Cantata One', serif;
  padding: 10px;
}

.wrapper {
  background-color: white;
}

.login-column1 {
  background-color: lightgray;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height: 100vh;
}

.login-column2 {
  background-color: white;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height: 100vh;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

HTML 代码

<div class="wrapper">
  <div class="row">
    <div class="login-column1">
      <div class="center-img-half">
        <img src="https://via.placeholder.com/300x300" />
      </div>
      <div class="center-div">
        <h2>Log in to your chess </h2>
      </div>
      <div class="center-div">
        <h4>Log in with your email and password to access your account.</h4>
      </div>
    </div>
    <div class="login-column2">
      <div class="center-img-half">
        <img src="https://via.placeholder.com/600x200" alt="Chess Pal Logo" />
      </div>
      <div class="center-div">
        <h2> Log in to your account </h2>
      </div>
      <div class="center-div">
        <Button class="black-white-button">Log In</Button>
      </div>
    </div>
  </div>
</div>

问题根源有两个：

1. 父容器.row设置了flex-wrap: wrap，窗口缩小时列的内容宽度超过容器就会自动换行
2. 图片没有设置缩放限制，非正方形图片的原始尺寸会撑大列的最小宽度，触发换行

修改步骤如下：

1. 取消.row的换行行为，强制两列始终在一行显示
2. 给图片添加自适应规则，保证按比例缩放且不撑破布局
3. 替换scale属性为更可控的尺寸限制，避免布局计算异常

调整后的代码 #

CSS 代码

.center-img-half {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* 增加内边距避免图片贴边 */
}

/* 图片自适应规则 */
.center-img-half img {
  max-width: 100%;
  max-height: 200px; /* 可根据需求调整图片最大高度 */
  object-fit: contain; /* 保持图片比例，不拉伸变形 */
}

.center-div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

.black-white-button {
  background-color: black;
  color: white;
  border-radius: 10px;
  font-family: 'Cantata One', serif;
  padding: 10px;
}

.wrapper {
  background-color: white;
}

.login-column1 {
  background-color: lightgray;
  display: flex;
  flex-direction: column;
  flex: 1; /* 自动分配两列宽度 */
  height: 100vh;
  overflow: auto; /* 窗口过小时允许列内滚动，避免内容溢出 */
}

.login-column2 {
  background-color: white;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  overflow: auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* 强制两列不换行 */
  width: 100%;
}

HTML 代码（无需修改）

<div class="wrapper">
  <div class="row">
    <div class="login-column1">
      <div class="center-img-half">
        <img src="https://via.placeholder.com/300x300" />
      </div>
      <div class="center-div">
        <h2>Log in to your chess </h2>
      </div>
      <div class="center-div">
        <h4>Log in with your email and password to access your account.</h4>
      </div>
    </div>
    <div class="login-column2">
      <div class="center-img-half">
        <img src="https://via.placeholder.com/600x200" alt="Chess Pal Logo" />
      </div>
      <div class="center-div">
        <h2> Log in to your account </h2>
      </div>
      <div class="center-div">
        <Button class="black-white-button">Log In</Button>
      </div>
    </div>
  </div>
</div>

修改说明 #

• flex-wrap: nowrap确保两列永远不会换行
• 图片的max-width:100%让图片宽度不超过列宽，object-fit:contain保证比例不变形
• 列添加overflow:auto，窗口极小时列内会出现滚动条，避免布局混乱
• 移除scale属性改用内边距+图片max-height控制显示大小，布局计算更稳定

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