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

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

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

完成像素到英寸测量的唯一可能方法是在直接测量所支持的每个移动设备之后对其进行硬编码，然后确定一种专门检测每个移动设备是否存在的方法。这非常重要，很可能无法解决问题。

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

Answer 2

看看这篇文章，http://ehikioya.com/online-ruler/你仍然必须“校准”，根据其他人的说法，根本无法解决这个问题。

Answer 3

CSS中有一个“in”宽度标识符，即“Inches”。

所以你只需要设置一个：

width: 3in;

该图片的规则。

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

但是，如果您在公司环境中为那些对网络一无所知的人编写CSS代码，那就是这样。

正如下面提到的评论 - 但CSS英寸不是真正的英寸。这就是媒体查询发挥作用的地方。您不必担心事情看起来像英寸，而是需要切换到像素并使用媒体查询根据屏幕尺寸动态调整图像大小。

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

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

Answer 4

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

$("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 5

这个问题是不正确的，很可能无论你想做什么都是错的，但我会留下怀疑和以下代码片段的好处：

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 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等。

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

6 个答案: