如何使图像占据屏幕的整个宽度? (HTML,CSS)

时间:2018-09-24 07:40:49

标签: html css twitter-bootstrap

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

enter image description here

这是我尝试编码的内容(theres引导程序):

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>

1 个答案:

答案 0 :(得分:2)

该空白通常是由人体边缘引起的。尝试添加

margin: 0;

到主体元素


编辑

我刚刚意识到您说您正在使用引导程序,我的最佳猜测是在列元素的右侧和左侧有15px的填充。因此,请尝试在row元素中添加设置这些属性:

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