响应式CSS图片无法占满容器宽度，宽屏时出现间隙如何解决？

嘿，这个问题我之前帮不少人解决过！宽屏下图没法占满容器还出现间隙，大概率是这几个点没处理好，咱们一步步来修：

首先给图片加上基础样式，确保它能完全填充所在的列容器：

img {
  width: 100%;
  height: auto; /* 保持图片比例，避免拉伸变形 */
  display: block; /* 消除图片默认的行内元素间隙 */
}

默认情况下img是行内块元素，自带一点点间距，display:block能把这个间隙去掉；width:100%则让图片跟着父容器的宽度动态调整，保证不会出现留白。

Bootstrap的默认列（col-*）自带左右padding，如果你自定义的no-gutter样式写得不对，宽屏下图列之间就会出现缝隙。正确的no-gutter样式应该是这样：

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutter > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

不仅要清除row的左右margin，还要把每个列的左右padding都去掉，这样列与列之间就不会有多余空白了。

你用的container-responsive看起来像是旧版自定义类，Bootstrap 3及以上版本推荐用container-fluid来做全屏响应容器，它能自动占满视口宽度，避免宽屏时容器两侧留空白：

<div class="container-fluid">
  <footer>
    <div class="row no-gutter">
      <div class="col-md-4 col-sm-12 col-lg-4 no-padding">
        <a href="#"><img src="images/but-plan..." alt="计划按钮"></a>
      </div>
      <!-- 其他列元素 -->
    </div>
  </footer>
</div>

有时候页面里的全局样式或第三方CSS会干扰图片宽度，比如给img设置了max-width限制。你可以用浏览器开发者工具（F12）选中图片元素，查看它的计算样式（computed），确认width是否真的是100%。如果有样式覆盖，可临时给图片样式加!important测试（优先建议找到冲突样式修改，避免滥用!important）：

img {
  width: 100% !important;
  height: auto;
  display: block;
}

按上面的步骤调整后，宽屏环境下图片应该就能占满容器、无缝并排了！

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