如何实现PC端网页右侧图片与左侧堆叠卡片对齐（Bootstrap开发）

我希望仅在笔记本电脑/PC端（大屏设备）的网页中，让页面右侧的图片与左侧的两张堆叠卡片对齐。目前用Bootstrap开发的代码如下，我尝试修改CSS的max-width/height属性但没有效果，不确定是不是CSS中id的使用方式有问题，对Bootstrap结合CSS的使用不太熟悉。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

  <link href="custom.css" rel="stylesheet">

  <title>#</title>
</head>

<body>
  <header>
    <div class="p-3" id="topHeader">
      <div class="container">
        <div id="row">
          <div class="col-xs 12">
            <h1>This is a Website </h1>
          </div>
        </div>
      </div>
    </div>
  </header>

  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#">home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">about</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">contact</a>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">
      <div class="card mb-5 shadow-sm">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg" class="img-fluid" />

        <div class="card-body">
          <div class="card-title">
            <h3>title</h3>
          </div>
          <div class="card-text">
            <p>
              a little text
            </p>
            <button type="button" class="btn btn-secondary btn-sm">button</button>
          </div>
        </div>
      </div>
      <div class="card mb-5 shadow-sm">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg" class="img-fluid" />

        <div class="card-body">
          <div class="card-title">
            <h3>title</h3>
          </div>
          <div class="card-text">
            <p>
              a little text
            </p>
            <button type="button" class="btn btn-secondary btn-sm">button</button>
          </div>
        </div>
      </div>
      </div>
    <div class="col-lg-8 col-md-6 col-sm-12" id="image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg" class="img-fluid" />
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
    integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
    crossorigin="anonymous"></script>

    <footer>
      copyright me and this website
    </footer>
</body>

</html>

1. 修复布局结构错误 #

原代码中头部的<div id="row">是错误用法，Bootstrap的行布局依赖class="row"，同时要修正列的类名格式，改成：

<div class="row">
  <div class="col-xs-12">
    <h1>This is a Website </h1>
  </div>
</div>

另外把内容区域的row放到container容器中，避免布局偏移：

<div class="container my-4">
  <div class="row">
    <!-- 左侧卡片列和右侧图片列代码 -->
  </div>
</div>

2. 添加大屏端专属CSS #

在custom.css中添加以下样式，仅在大屏（≥992px，对应Bootstrap的lg断点）生效：

@media (min-width: 992px) {
  #image {
    /* 让图片容器高度与左侧卡片容器完全匹配 */
    height: 100%;
    display: flex;
  }
  #image img {
    /* 图片填充容器，保持比例不拉伸变形 */
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
}

效果说明 #

• 大屏端：右侧图片容器会自动匹配左侧两张卡片的总高度，图片用object-fit: cover自适应填充，实现和左侧卡片完全对齐的效果。
• 小屏端：保持原有堆叠布局，不影响移动端体验。

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