如何在保留img-fluid d-block类的前提下实现图片全屏宽度显示

首先得提一句，你用的是Bootstrap 3.3.7，但img-fluid和col-12是Bootstrap 4及以上版本的类，这俩在Bootstrap 3里不会生效。不过没关系，我们可以通过自定义CSS和调整现有代码来实现需求，同时严格保留你想要的img-fluid d-block类。

步骤1：修正网格布局类 #

把col-12替换为Bootstrap 3支持的col-xs-12，这样列才能正确占满整行宽度：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <img src="https://i.postimg.cc/j5VZxV2h/Captura-de-pantalla-de-2020-12-09-16-25-58.png" class="img-fluid d-block">
    </div>
  </div>
</div>

步骤2：添加自定义CSS实现全屏宽度 #

因为Bootstrap 3没有img-fluid的样式定义，我们需要自己补上，同时处理container-fluid默认的左右内边距，让图片真正贴满屏幕边缘：

/* 定义img-fluid类，让图片自适应宽度并保持比例 */
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* 去除container-fluid的左右内边距，消除图片与屏幕的间隙 */
.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* 修正row的负margin，避免出现横向滚动条 */
.row {
  margin-left: 0;
  margin-right: 0;
}

完整代码示例 #

把自定义CSS放在页面的<head>标签里，整体代码如下：

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- 自定义样式 -->
  <style>
    .img-fluid {
      max-width: 100%;
      height: auto;
    }
    .container-fluid {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <img src="https://i.postimg.cc/j5VZxV2h/Captura-de-pantalla-de-2020-12-09-16-25-58.png" class="img-fluid d-block">
      </div>
    </div>
  </div>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

补充说明 #

• d-block类在Bootstrap 3里是有效的（属于响应式工具类），它会让图片以块级元素显示，避免默认行内元素带来的底部间隙。
• 去掉container-fluid的内边距后，图片就能完全贴合屏幕左右边缘，同时自定义的img-fluid样式保证图片自适应宽度且不会变形。

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