Question

晚上好，

我正在尝试将全宽图像作为我项目的主页，我正在使用Bootstrap，但我无法避免图片周围的白色边距是否只是放置，或者我用一个或一个按照我读到的答案中的建议构建它......

这是我的代码：

<div class="container">
    <a href="#" class="thumbnail">
      <%= image_tag("diversite_anglais.png", :alt => "Travail interculturel") %>
    </a>
</div>

<div class="wrapper"><div class="btn-group btn-lg btn-justified">
      <button type="button" class="btn btn-success">OUR SERVICES</button>
      <button type="button" class="btn btn-warning">OUR NETWORK</button>
      <button type="button" class="btn btn-info">OUR PARTNERS</button>
</div></span>

我的CSS：

.container {
  width:100%;
  margin-left: -15px;
  }

.container > img {
  width:100%;
}

变更：

<html>
<body>

<div class="wrapper"><div class="btn-group btn-lg btn-justified">
      <button type="button" class="btn btn-success">OUR SERVICES</button>
      <button type="button" class="btn btn-warning">OUR NETWORK</button>
      <button type="button" class="btn btn-info">OUR PARTNERS</button>
</div></span>

</body>

</html>


.navbar-header {
    padding: 20px;
 }

.navbar-brand {
    float:none;
}

.btn {
    margin: 10px;
}

.wrapper {
    position: absolute;
    top: 80%;
    left: 35%;
    right: 0;
    color: #ffffff;
    font: bold 30px 'Roboto', Sans-Serif;
    padding: 10px;
}

html { 
  background: url(diversite_anglais.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

问题已解决：

$navbar-margin-bottom: -20px;

Answer 1

这是Bootstrap的一个例子 - http://getbootstrap.com/examples/cover/

但是，否则，请确保图像周围没有边距和填充或包含div。如果您使用上面的示例模板，它应该可以正常工作。

Answer 2

您可以尝试这样的事情

   html {
      background: url(..img/yourimagefile) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

我会使用html代替.container来确保，因为它始终至少是浏览器窗口的高度。

删除image_tag，而不是使用上面的 css 。

更多详情HERE

全宽自举图像

2 个答案: