jquery - Bootstrap 中的巨型封面照片(全宽、全高)

标签 jquery html css wordpress twitter-bootstrap

我正在运行 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> 

但它并没有达到类似的效果,而且它在菜单栏和封面图片之间留下了相当大的差距。我对此有点陌生,但很想把它记下来。如果有更好的方法来解决这个问题或其他任何事情,我会洗耳恭听。或者眼睛。谢谢!

最佳答案

<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/

关于jquery - Bootstrap 中的巨型封面照片(全宽、全高),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18935805/

相关文章:

javascript - 两次使用相同的 AJAX 函数

javascript - 如何使用 jquery 查找 "p"元素的下一个 "this"同级元素?

html - CSS 边框底部有缺 Angular

css - 文本溢出 : ellipsis not working with certain fonts?

html - 如何在 bootstrap 3.3.7 框架内为 html 表单上的边框正确添加 css 选择器序列?

jquery - $.getJSON 从 API URL 接收 JSON

php - 如何使用 Jquery Ajax 更新 PHP 变量?

javascript - 检查页面底部的 isset 不起作用

javascript - 随机图像生成器但从不重复相同的图像 - Javascript

html - 用CSS background-image模拟按钮效果?