CSS图像不覆盖整个屏幕

问题描述：

我想我的CSS图像覆盖整个屏幕，我从JS数组中随机选择一个图像。它显示图像，但没有显示完美的完整页面背景图像。CSS图像不覆盖整个屏幕

main.html中

<html> 
    <head> 
    <link rel="stylesheet" href="main.css"> 
    </head> 
    <body> 

<button id = "button1">Click</button> 


    <script src = "main.js"></script> 
    </body> 
</html>

main.js

document.getElementById("button1").addEventListener("click", function(){ 
     showImage(); 
    }); 
    ... 
    function showImage(){ 
    document.write('<img class = "bg" src="'+theImages[whichImage]+'">'); 
    }

的main.css

img.bg { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
}

你确定你想添加''作为一个元素？如果你只是想要一个背景图片，为什么不使用css'[background-image]（https://developer.mozilla.org/en-US/docs/Web/CSS/background-image）'属性，或许在'

'？然后你可以设置'background-size：cover;'或'background-size：contains;'或'background-size：100％;'来获得你想要的。 – neilsimp1

@neilsimp我不认为这会对我有用，因为我从背景图像阵列中随机选择图像。 – Han

'document.body.style ['background-image'] ='url（''+ theImages [whichImage] +'“）';'会设置该属性。 – neilsimp1

答

这是什么样的CSS？我不建议使用vw/vh。

你最好关闭使用标准的背景大小和位置类似

/*background-image: url(../images/background.png);*/ optional 
background-size: cover; 
background-repeat: no-repeat; 
background-position: left top;

，你可以随时添加

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;

总跨浏览器兼容性

答

我同意设置document.body.style['background-image']属性将是最好的方法，尤其是因为它可以处理与屏幕形状不匹配的图像形状（使用background-position和background-size修复）。如果您仍想使用<img>，则可以使用CSS3长度单位vh,vw。支持现代浏览器可以在here找到。

img.bg { 
    width: 100vw; 
    height: 100vh; 
}

通知图像不会变得比视图端口更高，即使body元件确实（即有一个滚动条）。

CSS图像不覆盖整个屏幕

相关推荐