圖片未填充背景容器

我試圖爲應用打開一個頁面，但我的響應圖像不適合全屏。我曾嘗試使用背景大小的屬性值：但問題仍然存在。使用容器，它削減了圖像的寬度和一些丟失，我不想這樣。任何幫助，非常感謝。圖片未填充背景容器

下面是使用圖像IM - http://www.shbarcelona.cat/blog/cat/wp-content/uploads/2014/05/formula-2.jpg

謝謝。

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 


<link rel="stylesheet" href="styles.css"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/theme-classic/theme-classic.css"><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 

    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 


</head><body> 
<div data-role="page" > 
    <div id="background_image"> 

     <div data-role="header" data-theme="a"> 
      <h1>Formula 1 Team List</h1> 
     </div> 


     <div data-role="main" class="ui-content" id="index_button"> 
      <a href="#" data-role="button" data-ajax="false"> List of Teams </a> 
     </div> 

     <div data-role="footer" data-theme="a" data-position="fixed"> 
      <h1> Kevin Murphy - 11139323</h1> 
     </div> 
    </div> 
</div>

來源

2015-04-03 Kevin Murphy

你試過'背景大小：蓋;'？ – j08691 2015-04-03 17:38:38

我已經和圖像仍然太短，它的一個大圖像1280×1024所以我不明白爲什麼它不應該 – 2015-04-03 17:43:13

只需使用background-size: cover，使全寬度圖像。他們的關鍵在於確保您將div和body/html的高度和寬度設置爲100％。

html, body { 
    height: 100%; 
} 

#something { 
    color: white; 
    height: 100%; 
    width: 100%; 

    background: url(https://download.unsplash.com/photo-1426200830301-372615e4ac54) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

https://jsfiddle.net/shaansingh/soxjt0aj/2/

來源

2015-04-03 17:58:48

我仍然有問題，當我使用這段代碼，圖像仍然沒有填充頁面高度明智，和圖像現在也在邊緣 – 2015-04-03 18:09:36

你可以把你的代碼放在小提琴裏嗎？或提供網站鏈接？ – 2015-04-03 18:31:49

http://jsfiddle.net/Kev1113/yc85q4gt/ – 2015-04-03 18:43:51

圖片未填充背景容器

回答

相關問題