当我使用封面值时，背景大小不会缩放答案

【问题标题】：Background size doesnt scale when i use a value of cover当我使用封面值时，背景大小不会缩放
【发布时间】：2016-05-02 04:24:44
【问题描述】：

html ,body {
  height:100%;
  width:100%;
  margin:0px;
}

h1 {
  margin:50px;
}

.jumbotron {
  height:100%;
  background-image: url("http://www.zoophotels.com/wp-content/uploads/2015/02/cpt-new.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size:cover;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="jumbotron">
      <h1>Welcome</h1>      
    </div>  
  </body>
</html>

我不知道出了什么问题，但是当我将background-size 值更改为cover 时，背景不会根据我的浏览器大小进行缩放，但是当我将值设置为100% 100% 时，它像我预期的那样扩展。

那么，如何保持cover的值并让jumbotron类做正确的缩放（在这种情况下保持背景大小（cover）的值，而jumbotron做缩放时的大小仍然@987654330 @)

附加信息：

我希望结果是

1.图像覆盖率100% 100%（适合屏幕）

2.当我调整浏览器窗口的大小时，我希望图像比例仍然像 1 步一样

查看此网站：http://www.qerja.com/ 我希望 jumbotron 看起来像这个网站 jumbotron，当我调整浏览器窗口大小时调整图像宽度

【问题讨论】：

您使用的是哪种浏览器？
我正在使用谷歌浏览器
the background doesn't scale based on my browser size 它的规模。尝试调整浏览器的高度。当您使用100% 100% 时，图像的比例错误，图像失真。您可以在问题截图中添加问题+预期结果吗？
实际上我希望结果为 1.图像大小为 100% 100%（适合屏幕） 2.当我调整浏览器窗口的大小时，我希望大小比例仍然像1
在这种情况下，您需要拍摄 2 张不同的图像，一张用于横向屏幕，第二张用于纵向，我确信没有其他方法可以处理此问题

标签： html css

【解决方案1】：

封面按预期工作。图像保持它的纵横比，因为它相对于您的浏览器窗口进行缩放。与应用 100% 100% 不同。

将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。一些背景图像的某些部分可能不在背景中显示定位区域

CSS3 background-size Property

【讨论】：

我明白了……但现在我想要，1.图像覆盖率要像 100% 100%（适合屏幕）。 2.当我调整浏览器窗口的大小时，我希望图像比例仍然像 1 步一样。如何解决？
背景位置：中心中心；背景尺寸：封面；