CSS - 固定大小，与屏幕监视器无关

Question

无论显示器尺寸如何，如何使图像始终覆盖所有屏幕？我的图像高度为1000像素，宽度为1000像素。我不希望图像重复，但我不希望滚动条也出现。如果我使用％，则重复图像，因为它在div内。谢谢

我希望图像的底部始终位于浏览器页面的底部，而div / image总是大小相同，即使我使用浏览器进行缩放

      div {
        width: 1000px;
       left:0%;
    right:0%;
      top: 0%;
      height: 800px;
       text-align:center;
      position: absolute;
     background-image: url("image.png");
      background-position: 50% 50%; 
        margin:auto;  }

Answer 1

试试这个

div {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}

如果您还想了解更多信息，请查看此链接 https://www.w3schools.com/howto/howto_css_full_page.asp

Answer 2

如果您想要设置一个响应迅速的完整图像背景，您可以执行以下操作：

div {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 3

如果要将此图像添加为背景图像，可以添加以下css

 div { 
      width: 100%;
      height: 100%;
      background: url(images/bg.jpg) no-repeat center top; 
      position: fixed; 
      z-index: 0;
 }

或者如果你想要展示图像，你可以做以下事情

  <img src="images/bg.jpg" style="width: 100%;height :100%">

Answer 4

if（screen.width＆gt; = 500）{document.write（“body {zoom：78％;}”）;}

这是我的代码的解决方案，我需要更改缩放。