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

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

html

---

我确实编辑了bootstrap的

.containerFluid

，去掉了它默认的15px填充以及它没有宽度和高度的事实。我不确定引导是否有一些属性可能导致它，但当我在调试器中查看时，使它如此巨大的计算宽度是

#image container

中的

width

属性，它刚刚设置为100%。但它没有设置为大于我所知道的视口的父对象。（在容器上设置

最大宽度：100%；

只会使图像消失）

使用

边框大小属性的百分比属性

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%;
  }


使用
边框大小
属性的百分比属性

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%;
  }


我觉得有用吗？我不明白你为什么说有用。那个小提琴在结果窗口中只有空白。@Mockingbird-他们错过了小提琴中的
html，body{height:100%}
。实际上，这显示了我的问题，图像的宽度应该适合窗口的宽度，但它超出了窗口的宽度，如果高度设置为“自动”，则默认情况下它只会设置为0，除非div中有内容。我希望它将图像的本机比率保持在div中，但完全填充页面宽度，而不会剪裁图像。我觉得有用吗？我不明白你为什么说有用。那个小提琴在结果窗口中只有空白。@Mockingbird-他们错过了小提琴中的
html，body{height:100%}
。实际上，这显示了我的问题，图像的宽度应该适合窗口的宽度，但它超出了窗口的宽度，如果高度设置为“自动”，则默认情况下它只会设置为0，除非div中有内容。我希望它将图像的本机比率保持在div中，但完全填充页面宽度，而不会剪裁图像。
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%;
  }