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;