檢測屏幕高度和裁剪全尺寸圖像

我在很多網站上看到了非常酷且微妙的效果，主要用於登錄頁面。背景圖像在整個屏幕上設置爲全尺寸，並根據屏幕尺寸（或更具體的屏幕高度）在高度上裁剪。檢測屏幕高度和裁剪全尺寸圖像

這個example顯示我的意思。只需調整窗口大小以查看效果。我不知道這種技術被稱爲什麼，我當然不知道如何編寫它。顯然有Javascript和某種溢出：隱藏涉及。

任何線索..？

來源

2014-02-27 towin_

也許這會幫助你的方式：http://css-tricks.com/perfect-full-page-background-image/ – Jorg

看起來只是CSS。不是真的需要JS。 – putvande

在這種情況下，背景圖像僅覆蓋整個屏幕並水平居中，這解決了問題的一半。在我的示例中，由於瀏覽器高度，圖像被裁剪。基本上包含圖像的DIV必須裁剪。這隻能用JS來完成，對吧......？ –

@ 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的一切。

來源

2014-02-27 23:10:19 coma

明天我會試試，謝謝。很高興知道，這很簡單。 –

這是純粹的CSS，它使用的背景大小，在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

來源

2014-02-27 22:58:06 APAD1

謝謝！ :) IE再次變得怪異......唉！...！ –

檢測屏幕高度和裁剪全尺寸圖像

回答

相關問題