如何将背景图像适合屏幕？

Question

我试过这个css代码：

background: url(bg.jpg) center center no-repeat fixed;
background-size: cover;

但背景图像的高度仍然大于视口。为什么会这样？请不要给我代码，也请解释。

Answer 1

来自MDN：

  

封面与contains相反的关键字。尽可能大地缩放图像并保持图像宽高比（图像不会   被压扁了）。图像“覆盖”整个宽度或高度   容器。当图像和容器具有不同的尺寸时，   图像被剪切为左/右或上/下。

它比视口高，因为这是使其足够宽以填充视口而不改变宽高比的唯一方法。

在打破宽高比时使用100% 100%进行缩放。

如果文档的内容使得主体高于视口，您可能还必须设置background-attachment: fixed以强制它缩放到窗口而不是缩放到body元素。