如何让指定div背景铺满图片？解决Bootstrap3中.middle div图片留白问题

嘿，我来帮你搞定这个Bootstrap 3里的全屏背景图问题！我之前也遇到过类似的情况，给你拆解两个问题的具体解决方案：

出现右侧留白，大概率是这几个原因：Bootstrap默认容器的padding、body的默认margin，或者你的背景图CSS属性没设置到位。咱们一步步调整：

1. 先重置全局默认的边距，避免body自带的margin影响：

body {
  margin: 0;
  padding: 0;
}

2. 给.middle设置正确的背景图样式，确保它铺满整个视口：

.middle {
  width: 100vw; /* 强制占满浏览器视口宽度 */
  min-height: 100vh; /* 强制占满浏览器视口高度 */
  background-image: url('你的图片路径');
  background-size: cover; /* 让图片按比例覆盖整个容器，不会留白 */
  background-position: center center; /* 图片居中，避免裁剪关键区域 */
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

3. 如果你的.middle是放在Bootstrap的container或container-fluid里面，这两个类默认有左右15px的padding，会导致留白。这时候可以给.middle加负边距抵消：

.middle {
  margin-left: -15px;
  margin-right: -15px;
}

或者干脆把.middle放在container外面，这样就不会受容器padding的限制了。

Bootstrap的row类默认有左右-15px的margin，而且row内部的col类有15px的padding，直接在row里放图片会被这些样式限制。可以用这两种方法解决：

方案1：直接给row添加背景样式 #

把背景图直接设置在row上，同时调整row的边距：

<div class="middle row">
  <!-- 你的内容 -->
</div>

.middle.row {
  width: 100vw;
  min-height: 100vh;
  margin: 0; /* 去掉row默认的负margin，避免横向滚动条 */
  background-image: url('你的图片路径');
  background-size: cover;
  background-position: center;
}

方案2：给row内的col去掉padding，再设置背景 #

如果row里必须放col，就把col的默认padding去掉，再给col加背景：

<div class="middle row">
  <div class="full-bg-col col-xs-12">
    <!-- 你的内容 -->
  </div>
</div>

.middle.row {
  margin: 0;
  width: 100vw;
}
.full-bg-col {
  padding: 0; /* 去掉col默认的15px padding */
  min-height: 100vh;
  background-image: url('你的图片路径');
  background-size: cover;
  background-position: center;
}

这里给你一个可直接用的完整示例，包含两种情况：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全屏背景图示例</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    /* 重置全局边距 */
    body {
      margin: 0;
      padding: 0;
    }

    /* 普通.middle的全屏样式 */
    .middle {
      width: 100vw;
      min-height: 100vh;
      background-image: url('your-image.jpg');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      /* 如果在container内，打开下面两行 */
      /* margin-left: -15px; */
      /* margin-right: -15px; */
    }

    /* 使用row的.middle样式 */
    .middle.row {
      margin: 0;
      width: 100vw;
      min-height: 100vh;
      background-image: url('your-image.jpg');
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body>
  <!-- 情况1：直接使用.middle -->
  <div class="middle">
    <h1 style="color: white; text-align: center; padding-top: 50vh;">全屏背景图示例</h1>
  </div>

  <!-- 情况2：使用row的.middle（注释掉上面的情况1，打开这个即可） -->
  <!-- <div class="middle row">
    <div class="col-xs-12">
      <h1 style="color: white; text-align: center; padding-top: 50vh;">Row内的全屏背景图</h1>
    </div>
  </div> -->
</body>
</html>

• 尽量选择分辨率高、尺寸大的图片，避免缩放后模糊；
• 检查是否有其他自定义CSS影响了.middle的宽度，比如overflow: hidden或者其他元素的float属性；
• background-size: cover已经能适配不同屏幕尺寸，不需要额外写响应式媒体查询；
• 如果出现横向滚动条，检查是否有元素的宽度超过了100vw，调整margin或width即可。

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