javascript - 检测屏幕高度并裁剪全尺寸图像

Question

我在许多网站上看到过一种非常酷和微妙的效果，主要用于登录页面。背景图像在整个屏幕上设置为全尺寸，并根据屏幕尺寸(或更具体地说是屏幕高度)裁剪高度。

这example表明我的意思。只需调整窗口大小即可查看效果。我不知道这种技术叫什么，我肯定不知道如何编码。显然有 Javascript 和某种 overflow:hidden 参与。

任何线索..？

Answer 1

它是纯 CSS，它使用 background-size，IE8 及更低版本不支持:

background: url(path/to/image.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Can I Use