Fatal编程技术网
  • android/
  • Android 将图像设置为全屏HTML

Android 将图像设置为全屏HTML

android css html

Android 将图像设置为全屏HTML,android,css,html,Android,Css,Html,我试图在整个屏幕上显示一个图像，我的HTML如下所示： <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="./res/Default.png" width="100

我试图在整个屏幕上显示一个图像，我的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 S”屏幕的上半部分。有人知道为什么和/或如何修复吗？

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

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

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


身体{
溢出：隐藏；
}
img{
最小宽度：100%；
最小高度：100%；
}

您可以通过

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

您的问题是因为车身容器未设置为占据车窗的100%

使用代码的示例：

机身样式为
宽度的示例：100%；身高：100%和img：

尝试：


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





试试
style=“position:absolute；top:0；left:0；right:0；bottom:0”
你为什么不解释一下它是如何工作的以及为什么工作的？这是一个非常低质量的答案，可能会起作用，但不会给这个网站增加太多价值。你为什么不解释一下这是如何起作用的以及为什么起作用的？这是一个非常低质量的答案，可以工作，但没有增加太多的价值，这个网站。工程！！太好了，为什么需要顶部、左侧和位置：修复后才能工作？@simpleBob如果没有顶部和左侧0，您可能会发现差异，如果使用顶部和左侧0，则图像会发生倾斜，因为窗口的宽度x高度比例可能是无限的，这取决于它所显示的设备。使用溢出是另一种技术，但这不是问题所在。@simpleBob如果您将实际URL发布到您的图像，我们可以提供帮助。你只是想显示足够的图像来覆盖屏幕，还是想显示整个图像？我想要整个图像，拉伸（这是一个android项目，图像在HDD上），然后在我的答案中输入代码，然后这样做。除非您的标记中有其他导致问题的元素。与“认为”你的“身体”是100%不同，你是否尝试过将内联样式添加到你的身体中-然后你可以确保宽度和高度都缩放到100%

<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>