屏幕分辨率新手指南

Question

我得到了一张1920x1080的图像，用作页面上主容器的背景：

<div class="container"></div>
<style>
    .container {
        background: url("background.png");
        width: 1920px;
        height: 1080px;
    }
</style>

我正在使用分辨率为2880 x 1800的MacBook。但是这个容器比我的浏览器屏幕要宽得多，高得多。为什么我的显示器的屏幕分辨率比图像大，仍然不能完全显示这个1920 x 1080图像？是因为视网膜吗？我能在这里做些什么？我不能用background-size: contain缩放背景，因为一些元素的位置是严格的，当浏览器窗口调整大小时，它们会被放错位置。

Answer 1

(对不起，我没有名气来评论，所以我来回答)。

如果你的.container无论如何都是1080x1920，为什么不把背景图像的大小也设为1080x1920，并把背景位置设为左上角，这样就可以把它固定住了呢？

无论你的视网膜显示器认为'px‘单元是什么，如果它们都被设置为背景和容器，它就会匹配它们。

<div class="container"></div>
<style>
    .container {
        background: url("background.png");
        width: 1920px;
        height: 1080px;
        background-size: 1920px 1080px;
        background-position: top left;
    }
</style>

再次抱歉，我更好奇为什么这不能解决问题，而不是推荐一个实际的解决方案。我只是还不能提交评论。

Answer 2

因此，在缺少更好的方法(如果有)的情况下，我所做的就是当页面显示在视网膜屏幕上时进行缩放：

    .container {
      background: url("background.png") no-repeat;
      width: 1920px;  // the actual width of the background image
      height: 1080px; // the actual height of the background image
    }

    /* for high resolution display */
    @media
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
      body {zoom: 67%;}
    }

如果有人提出了更好的解决方案，请毫不犹豫地将其作为答案发布，我将取消此答案的标记，并将另一个标记为正确答案。