html - 使用 CSS 调整浏览器上的 div 宽度和高度

Question

我有一个包含图像的大 div。我希望该图像根据浏览器窗口的高度/宽度缩小或扩大。我可以通过使用水平实现这一点，width: 100%但如果我将高度设置为 100%，图像 div 会完全消失。

我意识到您必须将 BODY 和 HTML 设置为 100% 的高度和宽度，而我这样做无济于事。

如果我给它一个硬编码的像素高度，图像看起来很好，但如果浏览器变小，我希望它缩小。

有谁知道实现这一目标的正确方法，最好只使用 CSS？

我的代码是：

HTML, BODY {
  width: 100%;
  height: 100%;
}

#imagecontainer {
  width: 100%;
  height: 100%;
  background-image: url(image.jpg);
  background-size: 100% auto;
  background-position: center;
}

Answer 1

也许是这样的？ http://jsfiddle.net/dangoodspeed/N3MaJ/1/ 不确定我是否 100% 理解这个问题，但我认为你可能想要的线路是

background-size: cover;