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

Posted 2023-02-25

【中文标题】检测屏幕高度并裁剪全尺寸图像

【英文标题】：Detect screen height and crop full-size image

【发布时间】：2014-02-27 22:53:56

【问题描述】：

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

这个example 表达了我的意思。只需调整窗口大小即可查看效果。 我不知道这种技术叫什么，我当然也不知道如何编码。显然有 javascript 和某种溢出：隐藏涉及。

任何线索..？

【问题讨论】：

也许这会对您有所帮助：css-tricks.com/perfect-full-page-background-image

看起来只是 CSS。真的不需要 JS。

在这种情况下，背景图片只是覆盖了整个屏幕并水平居中，这样就解决了一半的问题。不过，在我的示例中，由于浏览器高度，图像被裁剪。基本上包含图像的 DIV 必须被裁剪。那只能用JS来做吧……？

【参考方案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

【讨论】：

谢谢！ :) IE 又奇怪了……啊……！

【参考方案2】：

@APAD1 是对的，所以这是不支持background-size 的浏览器的替代思路：

http://jsfiddle.net/coma/TS64y/

div 
    position: relative;
    width: 400px;
    height: 50px;
    overflow: hidden;


div img 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -200px;
    z-index: -1;

请停止使用 js 做所有事情。

【讨论】：

我明天试试，谢谢。很高兴知道，就是这么简单。