咨询：如何将Bootstrap 4着陆页横幅图片高度减少约1/3

解决Bootstrap 4着陆页横幅图片过高的方案 #

当然可以搞定这个问题！咱们只需要通过简单的HTML和CSS调整，就能把横幅图片的高度缩减约三分之一，让用户不用滚动就能看到更多页面内容。下面分两种常见的横幅实现场景给出具体方案：

场景1：横幅是直接嵌入的<img>标签 #

如果你的横幅是用<img>标签直接插入的，给图片加一个自定义类，然后通过CSS限制它的最大高度即可：

HTML 调整：

<!-- 给图片添加自定义类 .banner-img -->
<div class="w-100">
  <img src="你的横幅图片地址.jpg" class="img-fluid banner-img" alt="页面横幅">
</div>

CSS 调整：

.banner-img {
  max-height: 66.67vh; /* 直接设为视口高度的2/3，完美缩减1/3 */
  object-fit: cover; /* 保持图片比例，自动裁剪多余部分，避免拉伸变形 */
  width: 100%; /* 确保图片宽度铺满容器 */
}

小贴士：如果不想裁剪图片，可以把object-fit: cover换成object-fit: contain，但可能会出现留白，根据你的设计需求选择即可。

场景2：横幅是用背景图实现的 #

很多着陆页会把横幅图片作为容器的背景图，这种情况下调整容器的高度就可以：

HTML 调整：

<!-- 给背景容器添加自定义类 .banner-bg -->
<div class="banner-bg d-flex align-items-center">
  <div class="container text-center">
    <h1>你的页面标题</h1>
    <p>副标题或介绍内容</p>
  </div>
</div>

CSS 调整：

.banner-bg {
  min-height: 66.67vh; /* 把原来的高度（通常是100vh）缩减为2/3 */
  background-image: url("你的横幅图片地址.jpg");
  background-size: cover; /* 让背景图铺满容器 */
  background-position: center center; /* 保证图片居中显示 */
}

额外情况：如果用了Bootstrap的Jumbotron组件 #

如果你的横幅是基于Bootstrap的Jumbotron，默认有较大的内边距和高度，咱们可以同时调整内边距和高度：

.jumbotron {
  min-height: 66.67vh;
  padding-top: 3rem; /* 减少顶部内边距 */
  padding-bottom: 3rem; /* 减少底部内边距 */
}

你可以根据自己的实际代码结构选择对应的方案，调整后刷新页面就能看到效果啦！如果需要更精准的高度控制，也可以把vh单位换成具体的像素值（比如原来高度是900px，现在设为600px），灵活度很高。

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