html - Bootstrap 自动调整背景图像

Question

我试图在标题部分自动调整背景图像，但它不会保持纵横比。这是一个示例，图像底部被截断:http://i.imgur.com/sxedPHI.png或者如果我把它做成这个大小，它和标题下面的 div 之间会出现空格:http://i.imgur.com/xX1e4GZ.png我似乎几乎可以让它工作，但随后它将图片缩放到奇怪的宽高比并且图像失真:http://i.imgur.com/jtxDNr0.png

我希望页眉部分与图像大小完全相同，然后让图像始终显示所有图像(不切除一部分)并且页眉和下一个 div 之间没有空格。

这是我的 HTML 部分的代码:

    <header>
     T
    </header>

我相信这是相关的 CSS:

    header {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        color: #fff;
        background-image: url("ball.png");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

有问题的站点在这里:

http://www.stoppiefail.com/boot/sites3/index.php

Answer 1

您正在使用背景大小:100% 自动；最后将覆盖您以前的代码。

https://jsfiddle.net/26ejdss6/1/

div{
  width:400px;
  height:187px;
  background:url('http://ajgdirect.co.uk/wp-content/uploads/2015/04/football.jpg');
  background-size:cover;
  background-position:center;
}

另外，检查一个名为 backstretch.js 的简洁插件。这对这种事情来说非常好，尤其是当自动调整用户在 CMS 中添加的图像时

http://srobbin.com/jquery-plugins/backstretch/