背景图像不随窗口大小缩放答案

【问题标题】：background image not scaling with window size背景图像不随窗口大小缩放
【发布时间】：2016-06-21 12:11:45
【问题描述】：

所以基本上我有一个非常大的图像（超过 3000 x 2000），我将它设置为背景图像，并希望它随着窗口大小的调整而响应缩放。但是，即使我将宽度设置为 100% 并将容器设置为最大宽度 100%，它仍然希望保持其原始分辨率（右侧从屏幕上剪下并隐藏）

html

<div class="container-fluid">
  <div id="image-container">
  </div>
</div>

css

.container-fluid {
  height: 100%;
  width: 100%;
  padding: 0;
  }

#image-container {
  background-image: url(../img/bg.png);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  }

我确实编辑了引导程序的.container-fluid 以摆脱其默认的 15 像素填充以及它没有宽度或高度的事实。我不确定引导程序是否有一些可能导致它的属性，但是当我查看调试器时，导致它如此巨大的计算宽度是 #image-container 中的 width 属性，它刚刚设置为 100%。但它没有设置为大于我所知道的视口的父级。（在容器上设置max-width: 100%; 只会使图像消失）

【问题讨论】：

This 似乎对我有用？
我不明白你为什么说它有效。该小提琴在结果窗口中只有空白区域。
@Mockingbird - 他们错过了小提琴中的html, body { height: 100% }。 Here is the fixed example
实际上这显示了我在那里遇到的问题，图像的宽度应该适合窗口的宽度，但它会超出窗口的宽度，如果高度设置为自动，那么它默认设置为 0除非 div 中有内容。我希望它将图像的原始比例保持在 div 内，但完全填充页面的宽度，而不会剪切图像。

标签： css image twitter-bootstrap

【解决方案1】：

使用border-size属性的百分比属性。

html, body {
    height: 100%;
}

.container-fluid {
  height: 100%;
  width: 100%;
  padding: 0;
  }

#image-container {
  background-image: url(https://c1.staticflickr.com/9/8270/8998617248_977cfe9d55_b.jpg);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100%;
  }

http://www.w3schools.com/cssref/css3_pr_background-size.asp

【讨论】：