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

Question

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

使用下面的 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 来设置宽度和高度，但现在我得到了带有滚动条的完整图像，而空白意味着图像没有占据全屏。

 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
}

有人可以指导我如何完成它并且它必须在所有浏览器中工作:(

Answer 1

请记住，您的屏幕分辨率不必与您的浏览器分辨率匹配。你有浏览器色度(标题栏、地址、书签等)，你有操作系统用户界面(任务栏/启动器)等。

因此，如果您使用的是更大的屏幕(例如 1600x900)，您仅可以获得准确的尺寸，否则您会遇到问题。

但无论如何，假设您真的、真的、真的想要匹配那个尺码。

您必须放弃 background-size: cover; 以支持 background-size: contain;，这样您就可以根据容器调整图像大小(请参阅规范 here )并将图像放在左上角(而不是top center)。

作为旁注，我建议您使用 vh 和 vw 单位:

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

这样您就不会将用户锁定在特定的分辨率上。