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;

使用CSS调整浏览器大小时调整div的宽度和高度

1 个答案: