Html 背景图像在容器内拉伸全屏_Html_Css_Twitter Bootstrap

Html 背景图像在容器内拉伸全屏

html css twitter-bootstrap

Html 背景图像在容器内拉伸全屏,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试将背景图像拉伸到全宽。这是我的标记 <body> <div class="container"> <div class="text-center"> <h3><a href="#" class="logo" >The Sound <span class="fa fa-volume-off" style="color:#EF4836;"></span>linic&l

我正在尝试将背景图像拉伸到全宽。这是我的标记

  <body>
    <div class="container">
      <div class="text-center">
        <h3><a href="#" class="logo" >The Sound <span class="fa fa-volume-off" style="color:#EF4836;"></span>linic</a></h3>
      </div>
      <div class="vspace2"></div>
      <nav class="navbar text-center" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span style="color:#555;" class="fa fa-bars fa-2x"></span>
          </button>
       </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a class="fattify" href="#">About</a></li>
            <li><a class="fattify" href="#">Studio</a></li>
            <li><a class="fattify" href="#">Team</a></li>
            <li><a class="fattify" href="#">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
    </nav>

    <div class="first-main">
      <div class="text-center">
        Whatever I write here
      </div>
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

更新

您应该尝试使用CSS：

background-size:cover;

嗯，你的.容器有余量：0 15px

基本上，您可以在图像的容器上使用边距：0-15px。正如你所知，这不是最好的解决办法。对于这种布局，当您使用不同的宽度时，最好不要为布局定义默认值，而是在每个元素中放置一个边距，而不是所有文档。你将来可以避免这么多问题

但正如我所说。。。您可以使用边距来对齐它

演示：

基本上，您需要做的是将一些属性放入图像的容器中

.first-main{
    border-top: 5px solid #555;
    background : url(http://votemenot.com/upload/398/3980.jpg) no-repeat;
    background-size :100% auto;
    width : 100% ;
    height: 800px;
    margin: 0 -15px;
    padding: 0 15px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

内容框用于删除引导的边框框默认值，这使每个元素在使用填充时不会增加宽度，您可能知道

但我建议您重新安装您的容器，以便将来不会出现任何问题

演示：

放一个演示，你有这么多html代码，这里只有一个元素有css。我在这里尝试了一些东西，图像占据了100%的宽度。您应该检查是否有任何类冲突。。。请看我的小提琴我的意思是，我怎样才能使它在一个容器内全屏伸展？如果你看到图像的左右两边都有空白，我回答的问题是，在这种情况下我会怎么做。另外，我想我错过了“row”类，我应该用容器流体替换容器，使其达到全宽？当你处理占据整个屏幕的元素时，你只需要输入宽度：100%，使用使用特定宽度的图元时，将使用由图元创建的默认值。请参阅：不要忘记放置@media屏幕以转换。对齐到宽度为100%的元素，以调整为响应：-

.first-main{
    border-top: 5px solid #555;
    background : url(http://votemenot.com/upload/398/3980.jpg) no-repeat;
    background-size :100% auto;
    width : 100% ;
    height: 800px;
    margin: 0 -15px;
    padding: 0 15px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}