使用引导程序 3 时图像周围的空白区域

Question

好的，所以我正在使用 Bootstrap 3 框架创建一个网站，但我遇到了一个问题。 当我放置一张图片（普通图片，带有 img 标签）时，它的屏幕上有空白（左右）。 http://prntscr.com/9wuek5 - 你可以在这里看到，它甚至在我的导航栏下。我想做的是以某种方式摆脱那个空白，并将图片移动到中心（水平和垂直）。到目前为止，这是我的代码：

<nav id="mainNavbar" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#colaps">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">ivke11080</a>
        </div>
        <div class="collapse navbar-collapse" id="colaps">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="page-scroll" href="#">Home</a></li>
                <li><a class="page-scroll" href="#">Projects</a></li>
                <li><a class="page-scroll" href="#portfolio">About</a></li>
            </ul>
        </div>
    </div>
</nav>

<img src="img/chase.jpg"/>

我尝试在图像周围设置边框，以便查看它是否适用于空白区域，但不是，它只是在图像周围。

Answer 1

您可以使用以下样式绝对定位您的图像：

img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, 50%);
}

看到这个fiddle