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/

Answer 2

为什么不使用带有绝对div的IMG标签，而不是使用背景图像。

HTML：

<header>
    <img src="your/background/image.jpg" class="bg">
    <div class="headerContent">Your Header Content Goes Here</div>
</header>

CSS：

header {
    width: 100%;
    position: relative;
}
header img.bg {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
}
header .headerContent {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

我没有对此进行过测试，但这只是在css之外执行此操作的另一种方法，它可以让标题的高度永远不会被切断。

Bootstrap自动调整背景图像

2 个答案: