浏览器中的表观分辨率更改

时间:2015-03-21 19:23:12

标签: html css resolution screen-resolution

我有一个非常奇怪的分辨率问题,我希望这些标签至少部分合适。

这里发生了什么:
我有一个大小为1920x1080的图像,我的屏幕分辨率也是1920x1080,如操作系统所示(Windows 8.1)。在Windows照片查看器中查看图像,然后单击按钮使其成为"实际大小"使其从左到右填充整个屏幕,同时可以按预期垂直滚动。

我现在在网站/ html文件中使用此图片。我已经尝试了<img>和CSS background-image,将元素或包含框的大小调整为1920x1080,无论我尝试什么,图像太大,我只看到大约2/3的它横向。更重要的是,我已经为一个绝对定位的空div添加了一个边框,并通过CSS给出了div width: 1247px;。边框几乎横跨整个屏幕,两边各留出约30个像素,这使我得出的结论是,无论出于何种原因,我的浏览器(在最新版本的Firefox和Chrome中测试过)都会改变其内容。分辨率为1280xsomething。我发现这很奇怪,特别是因为我在经典桌面模式下使用它们并且可以在它们之上自由显示其他窗口而没有任何图形效果,这通常在应用程序以不同分辨率显示其内容时发生。 / p>

所以,我的问题是:

  1. 这是一个已知问题还是我做错了什么?
  2. 如何解决此问题并使我的浏览器使用我的屏幕分辨率?
  3. 这是一个简单的设置,可以重现相关问题。保存为anyfilename.html,在系统设置中将屏幕分辨率设置为1920x1080,在浏览器中打开文件:

    <html>
      <head>
        <style type="text/css">
          body {
            background-image: url(http://www.hd-wallpapers.com/download/black-glass_1920x1080_225-hd.jpg);
          }
    
          div {
            border: 2px solid red;
            width: 1247px;
          }
        </style>
      </head>
      <body>
        <div>&nbsp;</div>
      </body>
    </html>
    

0 个答案:

没有答案