如何让Bootstrap列的背景图完整填充容器且不超出边框，适配可变表单元素

解决方案 #

你只需要给.image-left类补充几个背景控制属性，同时清理冗余类即可实现需求：

所需新增的CSS属性说明 #

• background-size: cover：自动缩放背景图，保证完全覆盖整个列容器，不会出现空白区域，超出容器的部分会自动裁剪，不会溢出边框
• background-repeat: no-repeat：禁止背景图重复平铺
• background-position: center：让背景图居中显示，避免图的核心内容被裁剪
• 你给div加的img-fluid类是针对<img>标签的响应式类，在div上无效可以直接删除

如果你的需求是完整显示整张背景图，不允许裁剪，可以把background-size的值改为contain，这种情况下可能会在列的上下/左右出现留白，按需选择即可。

补充说明（可选） #

如果你希望整个行的高度至少撑满整个浏览器视口，不会因为左右列内容过少导致高度不足，可以给外层的.content行添加样式：

.row.content {
  min-height: 100vh;
}

Bootstrap 4及以上版本的row默认使用flex布局，同行的列会自动保持等高，不需要额外设置等高样式。

修改后的完整代码 #

<style>
  .image-left{
      background-image: url('some_url.jpg');
      /* 新增以下属性 */
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
  }
  /* 可选：撑满视口高度 */
  .row.content {
    min-height: 100vh;
  }
</style>
<div class="container-fluid">
<div class="row content">
    <!-- 移除了无效的img-fluid类 -->
    <div class="col-md-7 sidenav text-left image-left">
        <p>adasda sdasdasdasdasd ddddddd </p>
        <p>Test line</p>
        <p>Test line</p>
        <p>Test line</p>
        <p>Test line</p>
        <p>Test line</p>
        <p>Test line</p>
        <p>Test line</p>
        <p>Test line</p>
        <p>Test line</p>
    </div>
    <div class="col-md-5 sidenav">
        <p>Test line</p>
    </div>
</div>
</div>

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