如何使图像占据屏幕的整个宽度？ （html，css）

Posted 2021-03-27

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

继承人我试图编码（theres bootstrap）：

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>

答案

白色空间通常是由身体边缘引起的。尝试添加

margin: 0;

到身体元素

---

编辑

我刚刚意识到你说你正在使用bootstrap，我最好的猜测是在列元素的左右两侧有15px的填充。因此，请尝试在row元素中添加set这些属性：

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