如何使图像占据屏幕的整个宽度？（HTML，CSS）答案

【问题标题】：how do i make the image take the full width of the screen? (html, css)如何使图像占据屏幕的整个宽度？（HTML，CSS）
【发布时间】：2019-02-27 16:34:31
【问题描述】：

正如标题所说，我只是想知道如何删除右侧、左侧和顶部导航栏之间的剩余白色边框，以使图像占据整个宽度。

这是我尝试编写的代码（有引导程序）：

CSS：

.img_banner {
  min-height : 100%;
  min-width : 100%;
  background-size:100% 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

HTML

  <div class="container-full col-md-12">
      <img src="img/banner1.jpg" class="center-block img_banner img-responsive portfolio-box">
  </div>

【问题讨论】：

尝试宽度：100vw；高度：100vh
图片还没有占满整个屏幕
您还需要发布 container-full 的 css 以供我们帮助，您还可以检查浏览器中的元素，通过检查您将能够找出导致问题的原因。

标签： html css twitter-bootstrap

【解决方案1】：

空白通常是由正文中的边距引起的。尝试添加

margin: 0;

到正文元素

编辑

我刚刚意识到您说您正在使用引导程序，我最好的猜测是列元素的左右两侧有 15px 的填充。所以尝试在行元素中添加设置这些属性：

margin-left: -15px;
margin-right: -15px;
width: calc(100% + 30px);

【讨论】：

感谢您的提示，但是右侧是唯一剩下的带有白色边框的一侧
再次编辑我的答案以修复右侧的空白