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

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

@media body
{

    width:1024px;
    height:720px;

}

Answer 2

请注意，您的屏幕分辨率不必与浏览器分辨率相匹配。你有浏览器色度（标题栏，地址，书签等），你有OS UI（任务栏/启动器）等。

因此，如果您使用的是较大的屏幕（例如1600x900），则可以获得仅的确切尺寸，否则您将遇到问题。

但无论如何，让我们说你真的，真的，真的想要匹配那个大小。

您必须放弃background-size: cover;，而不是background-size: contain;，因此您需要将图片大小调整为容器（请参阅规范here）并将图片放入{{1 （而不是top left）。

作为旁注，我建议您使用top center和vh单位：

vw

这样您就无法锁定某个分辨率的用户。

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

2 个答案: