設置圖像全屏HTML

我試圖顯示的圖像填滿整個屏幕，我的HTML看起來像這樣：設置圖像全屏HTML

<!DOCTYPE html> 
<html lang="de"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body> 
     <img src="./res/Default.png" width="100%" height="100%"/> 
    </body> 
</html>

現在，它看起來它應該幾乎無處不在，但它僅填充了上半的屏幕上的一個「HTC Incredible S」。任何人都知道爲什麼和/或如何修復？

來源

2013-04-12 Daniel

試着去'風格= 「的位置是：絕對的;頂部：0;左：0;右：0;底部：0」' – tobspr

您可以通過

top:0; 
left:0; 
position:fixed; 
min-width:100%; //keeps it filling the browser window vertically 
min-height:100%; //keeps it filling horizontally

JsFiddle

Full screen result

來源

2013-04-12 08:38:56

你爲什麼不解釋一下這個方法和原理？這是一個真正低質量的答案，可以工作，但沒有增加這個網站的價值。 – Shade

作品！很好，爲什麼你需要頂部，左側和位置：固定它的工作？ – Daniel

@simpleBob你可能會找出差異http://jsfiddle.net/E8QgM/沒有頂部和左邊0和頂部和左邊0 http://jsfiddle.net/Z7mA8/ –

這將最大化圖像。如果圖像大於視口，則會溢出但隱藏。你永遠不會得到圖像沒有覆蓋的白色區域。

<body> 
    <img src="./res/Default.png"/> 
</body> 

body { 
    overflow: hidden; 
} 
img { 
    min-width: 100%; 
    min-height: 100%; 
}

http://jsfiddle.net/bzTNV/2/

來源

2013-04-12 08:37:50 Johan

你爲什麼不解釋一下如何以及爲什麼這個工程？這是一個真正低質量的答案，可以工作，但沒有增加這個網站的價值。 – Shade

我正在研究它... – Johan

做到這一點你的問題是因爲身體容器沒有設置佔用的100％窗戶。 http://jsfiddle.net/ejTSL/1/

與身體實例與width:100%;height:100%;和IMG固定在瀏覽器窗口的風格：使用你的代碼

例http://jsfiddle.net/9BnGD/2/

嘗試：

<!DOCTYPE html> 
<html lang="de"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
    </head> 
    <body style="width:100%;height:100%"> 
     <img src="./res/Default.png" width="100%" height="100%" style="position:fixed;top:0;left:0;/> 
    </body> 
</html>

來源

2013-04-12 08:41:02 PassKit

雖然圖像變得傾斜 – Johan

那麼它會這樣做，因爲窗口可以是無限數量的寬度x高比例，取決於顯示的設備。使用溢出是另一種技術，但這不是被問到的。 – PassKit

不工作，我認爲我的「身體」已經是100％ – Daniel

我用這個簡單的標記。只需將其粘貼在html正文中即可。它可以被修改爲使用css類或在JQuery中創建。我還沒有在所有設備上進行過測試，但是我還沒有發現任何對此不敏感和移動友好的事情。

<div id="FullscreenDiv" style="z-index:99999;display:none;position:fixed;background-color:black;top:0px;bottom:0;left:0;right:0"> 
    <div id="FullscreenDivImg" style="position:fixed;background-color:black;background:url(../Content/Images/Example.png) center center no-repeat;background-size:contain;top:10px;bottom:10px;left:10px;right:10px"> 
    </div> 
</div>

來源

2017-06-10 19:04:47 JPoole

設置圖像全屏HTML

回答

相關問題