如何使图像占据屏幕的整个宽度?(HTML，CSS) [英] how do i make the image take the full width of the screen? (html, css)

问题描述

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

as the title says, im just wondering how to remove the remaining white borders on the right, left and in between the navbar on the top in order for the image to take up the entire width.

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

heres what i tried to code (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>

推荐答案

空白通常是由体内的空白引起的.尝试添加

that white space is usually caused by margin in the body. try adding

margin: 0;

到body元素

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

I just realized you said you're using bootstrap, my best guess is that there's 15px padding on the right and left of column elements. So try adding set these properties in the row element:

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

这篇关于如何使图像占据屏幕的整个宽度?(HTML，CSS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！