2

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

4

4 回答 4

2

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

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

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

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

于 2013-04-12T08:37:50.433 回答
2

你可以这样做

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

提琴手

全屏结果

于 2013-04-12T08:38:56.790 回答
1

您的问题是因为 body 容器未设置为占用 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-12T08:41:02.290 回答
0

我使用这个简单的标记。只需将其粘贴在 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-10T19:04:47.093 回答