基于Bootstrap 5实现类Twitter登录页的图片布局适配问题求助

你的核心需求是：左侧图片右对齐、保持比例且窄屏时裁剪左侧，右侧放表单，同时图片+表单区域加页脚刚好占满视口高度。现有代码的问题在于强制给图片加vh-100导致比例失调，且row的vh-100把页脚挤出了视口。

下面是修正后的实现方案，两种方式任选：

方式1：使用背景图（更简洁） #

这种方式无需额外处理img标签，直接用容器的背景图实现需求：

<div class="container d-flex flex-column vh-100">
  <!-- 主内容区：自动填充页脚外的剩余高度 -->
  <div class="row flex-grow-1">
    <!-- 左侧图片容器 -->
    <div class="col-6 position-relative overflow-hidden">
      <div class="w-100 h-100 bg-image bg-position-right bg-size-cover" style="background-image: url('../assets/login.jpg');"></div>
    </div>
    <!-- 右侧表单区 -->
    <div class="col-6 d-flex align-items-center justify-content-center">
      <!-- 表单内容 -->
      <div class="w-75">
        <h2>登录</h2>
        <form>
          <div class="mb-3">
            <label for="email" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input type="password" class="form-control" id="password">
          </div>
          <button type="submit" class="btn btn-primary w-100">登录</button>
        </form>
      </div>
    </div>
  </div>
  <!-- 页脚 -->
  <div class="row py-3 bg-light">
    <div class="col text-center">
      This is the footer
    </div>
  </div>
</div>

方式2：使用img标签（贴近你的原始代码） #

如果坚持用img标签，通过object-fit和object-position保证图片比例和对齐：

<div class="container d-flex flex-column vh-100">
  <!-- 主内容区 -->
  <div class="row flex-grow-1">
    <!-- 左侧图片容器 -->
    <div class="col-6 position-relative overflow-hidden">
      <img src="../assets/login.jpg" class="w-100 h-100 object-fit-cover object-position-right" alt="login">
    </div>
    <!-- 右侧表单区 -->
    <div class="col-6 d-flex align-items-center justify-content-center">
      <!-- 表单内容 -->
      <div class="w-75">
        <h2>登录</h2>
        <form>
          <div class="mb-3">
            <label for="email" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input type="password" class="form-control" id="password">
          </div>
          <button type="submit" class="btn btn-primary w-100">登录</button>
        </form>
      </div>
    </div>
  </div>
  <!-- 页脚 -->
  <div class="row py-3 bg-light">
    <div class="col text-center">
      This is the footer
    </div>
  </div>
</div>

关键要点说明： #

• d-flex flex-column vh-100：让容器垂直排列，整体占满视口高度
• flex-grow-1：给主内容row添加这个类，让它自动填充页脚之外的所有剩余空间，保证整体布局刚好占满视口
• object-fit-cover（img方式）/bg-size-cover（背景图方式）：保证图片按比例填充容器，不会拉伸变形，超出部分自动裁剪
• object-position-right（img方式）/bg-position-right（背景图方式）：让图片右对齐，当屏幕变窄时，会优先裁剪图片左侧部分，符合需求
• position-relative overflow-hidden：确保图片只在容器范围内显示，超出部分被隐藏

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