如何让Bootstrap列中的图片仅显示至首屏高度？

先修正你HTML里的两处小错误：

• <title>标签被错误放在了闭合的</head>之后，需移到<head>内部
• 重复闭合了<head>标签，要删掉多余的那个

核心是通过CSS让图片容器占满首屏高度，同时让图片适配容器，以下是完整解决方案：

修改后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="project.css" />
  <title>My Lead Form</title>
</head>
<body>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous"
  ></script>
  <div>
    <div class="container-fluid">
      <div class="row align-items-center text-center">
        <div class="col-md-6 justify-content-center">Column-1</div>
        <div class="col-md-6 second-column">
         <img src="project.jpg" alt="首屏图片">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS（project.css）部分

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container-fluid {
  padding: 0; /* 移除Bootstrap默认左右内边距，实现无间距布局 */
  height: 100%;
}

.row {
  margin: 0; /* 移除Bootstrap row默认左右外边距 */
  height: 100vh; /* 让行高度等于当前视口高度，即首屏高度 */
}

.second-column {
  height: 100%; /* 让第二列高度与行保持一致 */
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}

.second-column img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片按比例填充容器，多余部分自动裁剪，保持比例不变 */
}

关键说明 #

• 设置html, body { height: 100% }是为了让页面根元素继承视口高度，确保后续容器能获取正确的高度基准
• 100vh直接取当前视口高度，保证row刚好占满首屏
• object-fit: cover是核心，它让图片保持原有比例的同时完全覆盖容器，超出部分自动裁剪，从而实现图片适配首屏高度的需求
• 移除container-fluid和row的默认内外边距，实现真正的无间距布局

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