如何强制浏览器显示 3 英寸宽的图像？

Question

拥有简单的 HTML 代码

<table>
    <tbody>
        <tr>
            <td>
                <img  ... >
            </td>
        </tr>
    </tbody>
</table>

和 CSS 样式

* {
    border:none;
    margin:0;
    padding:0
}
html {
    position:relative;
    min-width:342px;
    height:100%;
    min-height:319px
}
table {
    position:absolute;
    margin-left:-171px;
    margin-top:-159px;
    top:50%;
    left:50%
}
img, table {
    width:342px;
    height:319px;
}

所有都可以通过 this fiddle 访问（本例中只有红框图片），

固定大小的图片水平和垂直居中。这很简单，但是在具有高屏幕分辨率的手机上看起来不太好，当屏幕大部分看起来是白色并且屏幕中间有东西时，如果不放大用户就无法识别。

使用<meta name="viewport" content="width=device-width"> 并没有多大帮助，好像手机只有4英寸宽上千像素，图像仍然只有大约英寸宽。

我阅读了很多关于屏幕分辨率问题的信息，但没有找到任何解决方案，因为大多数浏览器都认为 1 英寸是 96 像素，因此使用 in、pt 或 pc 毫无用处。

如何强制浏览器在 html 页面内制作图像，比如说 3 英寸宽？

Answer 1

CSS 中有一个“英寸”宽度标识符，即“英寸”。

所以你只需要设置一个：

width: 3in;

该图像的规则。

http://www.w3schools.com/cssref/css_units.asp

但前提是您在企业环境中为对网络一无所知的人编写 CSS 代码。

正如下面提到的 cmets - CSS 英寸不是真正的英寸。这就是媒体查询发挥作用的地方。您无需担心以英寸为单位的外观，而是需要切换到像素并使用媒体查询根据屏幕尺寸动态调整图像大小。

Here 是一个页面链接，该页面解释了数字显示器如何转换为物理英寸，并包含一个计算器程序。一切都与 DPI 有关。

当您尝试下拉菜单中的不同选项时，您会明白为什么这是一个不可能准确回答的问题。如果您只担心单个显示器，那么请务必使用他们的计算器并获得一英寸的精确像素宽度，然后在您的 CSS 中使用它。

Answer 2

这是不可能的。 in 测量用于打印，而不用于视频输出。如果您使用width:8in;height:11.5in，那么它将作为标准 Letter 大小的区域打印到纸上。

即使在相同分辨率的屏幕上，一英寸也会有所不同。例如，电话与投影仪。它们都可以具有高分辨率，但投影图像上一英寸的像素会很小。此外，无法检测投影图像的大小，因为它是由投影仪的镜头控制的（想象一个 20 英尺的投影仪屏幕，宽度为 2000 像素，即每英寸 8 像素）。

完成像素到英寸测量的唯一可能方法是在直接测量支持的每个移动设备后对其进行硬编码，然后确定一种方法来专门检测这些移动设备中的每一个是否存在。这很重要，而且很可能无法作为解决方案。

总而言之，强制浏览器显示 3 英寸的大小是不可能的，因为它真的不知道这意味着什么。坚持使用百分比，或为受支持的移动设备制作像素到英寸转换库。

Answer 3

通过让用户校准“英寸”是什么并相应地调整所有内容，您可以获得一个非常好的近似值。有多种存储选项，您可以在其中保存用户已校准的内容以及创建校准器的多种方式。

$("img").each(function () {
    $(this).data("width", $(this).width());
    $(this).data("height", $(this).height());
})
$("#calibrator").on("change", function () {
    var multiplier = this.value;
    $("img").each(function () {
        var newWidth = $(this).data("width") * multiplier;
        var newHeight = $(this).data("height") * multiplier
        $(this).css({
            width: newWidth,
            height: newHeight
        });
    });
})

http://jsfiddle.net/bY2SM/8/

Answer 4

这个问题格式不正确，很可能你想做的任何事情都是错误的，但我会让你带着疑问和以下代码 sn-p：

function getPPI(){
  var div = document.createElement("div");
  div.style.width="1in";

  var body = document.getElementsByTagName("body")[0];
  body.appendChild(div);

  var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
  body.removeChild(div);

  return parseFloat(ppi);
}

image.width = 3 * getPPI();

Answer 5

看看这篇文章，http://ehikioya.com/online-ruler/ 不过，你仍然必须“校准”，正如其他人所说，根本没有办法解决这个问题。

Answer 6

虽然我很欣赏关于这个问题的强烈意见，但 HTML/CSS 的用途远不止是在屏幕上显示页面。它实际上有一个很好的系统来描述书籍、目录和其他印刷/数字媒体中的页面。

W3C 定义了 CSS 的扩展来处理“分页媒体”，其中内容被分成固定大小的单独“表面”（页面）。 definition 仍处于草稿形式，但已经足够远，有几个库支持它（weasyprint 是我用来转换为 PDF 的库）。

该格式非常强大，允许固定页面大小、页眉、页脚、页码、左/右、标题和章节页面的单独格式。 例如，下面是页眉和数字的简单样式表定义（取自 W3C 定义文档）：

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

我提到这一点，因为在使用分页媒体时，OP 的问题变得合法且重要，其中文本、图像和对象的固定尺寸变得很重要。

对于我们的工作，我们需要以编程方式定义报告，虽然它们可能不会打印，但需要以分页格式查看或转换为 PDF 以进行存储和可能的打印。

有很多很好的教程：here 和 here 等等。