html - 将我的Div设置为1024 x 768像素

我正在尝试使用宽度x高度为1024px x 768px的背景图像创建一个Div。而且它必须适合整个浏览器窗口。

使用下面的CSS我可以实现全屏显示图像，但图像被裁剪

 html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
        }

    #wrapper {
            background-image : url(home.jpg);
            background-position: top center !important;
            background-repeat: no-repeat !important;
            background-size: cover;
            background-position: center;
            min-height: 100%;
            width : 100%;
            height : 100%;
        }

        #container {
            height: 100%;
        }

我尝试使用@media选项在css下面使用CSS设置宽度和高度，但是现在我获得了带有滚动条的完整图像，并且空格表示图像未占据全屏。

 html, body {
    height: 768px;
   width: 1024px;
   margin: 0;
   padding: 0;
        }

#wrapper {
            background-image : url(home.jpg);
            background-position: top center !important;
            background-repeat: no-repeat !important;
            background-size: cover;
            background-position: center;
            height: 768px;
            width: 1024px;

        }

        #container {
            height: 100%;
        }

@media (min-width:769px) and (max-width:1024px){
    // your code
}

有人可以指导我如何做到这一点，它必须在所有浏览器中都能起作用:(

最佳答案

请记住，您的屏幕分辨率不一定与您的浏览器分辨率匹配。您具有浏览器色度（标题栏，地址，书签等），您具有OS UI（任务栏/启动器）等。

因此，只有在使用更大的屏幕（例如1600x900）时，您才能获得确切的尺寸，但否则会遇到问题。

但是，不管怎么说，您真的，真的，真的想要匹配该大小。

您必须放弃background-size: cover;以便使用background-size: contain;，以便将图像调整为适合容器的大小（请参见规格here），然后将图像放置到top left（而不是top center）。

作为附带说明，我建议您使用vh和vw单位：

#wrapper { width: 100vw; height: 100vh; max-width: 1024px; max-height: 768px; }

这样，您就不会将用户锁定在某个分辨率上。

关于html - 将我的Div设置为1024 x 768像素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41786992/