图片未填充背景容器

我试图为应用打开一个页面，但我的响应图像不适合全屏。我曾尝试使用背景大小的属性值：但问题仍然存在。使用容器，它削减了图像的宽度和一些丢失，我不想这样。任何帮助，非常感谢。图片未填充背景容器

下面是使用图像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

图片未填充背景容器

回答

相关问题