Question

我正在运行Bootstrap 2.3和Wordpress，我的目标是制作一张与此类似的巨型封面图片：http://www.platetheslate.com/（仅限我的导航栏位于顶部。）及其下方的文章。

我正在尝试通过我的头文件来实现它，在最顶层使用这样的代码：

<style> 
.cut img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
} 
</style> 

<div class="cut">
    <img src="">
</div>

但它没有达到类似的效果，它在菜单栏和封面图片之间留下了相当大的差距。我在这方面有点新意，但我很想把它搞定。如果有更好的方式来处理这个或任何事情，我会全力以赴。还是眼睛。谢谢！

Answer 1

<html>
<head>
<style>

   html { 
      background: url(your-image.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
</style>
</head>
<body>
</body>
</html>

您还可以尝试使用jquery解决方案： http://srobbin.com/jquery-plugins/backstretch/

Answer 2

如果你包含Jason B codeld

，这就是你的代码的样子

<style> 
   html { 
      background: url(your-image.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
.cut img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
} 
</style> 

<div class="cut">
    <img src="">
</div>

Bootstrap中的巨型封面照片（全宽，全高）

2 个答案: