Question

我获得了一张1920 x 1080的图片，用作页面上主要容器的背景：

<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，为什么不将背景图片大小设置为那个，背景位置为左上方以强制它到位？

无论你的视网膜显示器认为'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%;}
    }

如果有人想出更好的解决方案，请不要犹豫，将其作为答案发布，我会将此答案标记为正确，并将另一个答案标记为正确答案。

屏幕分辨率指导新手

2 个答案: