引導程序自動調整背景圖像

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之外執行此操作的另一種方法，這將使標頭的高度永遠不會被切斷。