Question

我正在尝试显示填满整个屏幕的图像，我的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”上填满屏幕的上半部分。任何人都知道为什么和/或如何修复它？

Answer 1

这将最大化图像。如果图像大于视口，它将溢出但被隐藏。您永远不会得到图像未覆盖的白色区域。

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

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

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

Answer 2

您的问题是因为正文容器未设置为占据窗口的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>

Answer 3

你可以通过

来做到这一点

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

Answer 4

我使用这个简单的标记。只需将其粘贴在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>

将图像设置为全屏HTML

4 个答案: