将我的 Div 设置为 1024 x 768 像素答案

【问题标题】：Setting my Div to 1024 x 768 px将我的 Div 设置为 1024 x 768 像素
【发布时间】：2017-01-22 12:00:05
【问题描述】：

我正在尝试使用宽 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 设置宽度和高度，但现在我获得了带有滚动条的完整图像，并且空白表示图像未占据全屏。

 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
}

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

【问题讨论】：

标签： html css

【解决方案1】：

请记住，您的屏幕分辨率不必与您的浏览器 分辨率相匹配。你有浏览器色度（标题栏、地址、书签等），你有操作系统 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; }

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

【讨论】：

【解决方案2】：

您想添加以下代码以获得大小为 1024 * 720 的 div，只需执行以下操作。

@media body
{

    width:1024px;
    height:720px;

}

【讨论】：