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

有简单的HTML代码

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

所有这些都可以通过访问（本例中只有红色方框图像）

固定大小的图片水平和垂直居中。这很简单，但是在屏幕分辨率高的手机上看起来不太好，当大多数屏幕看起来是白色的，屏幕中间是一个用户不会被放大的情况下无法识别的东西。

使用

并没有多大帮助，因为若手机在4英寸的范围内有超过千像素的宽度，那个么图像仍然只有大约1英寸宽

我读了很多关于屏幕分辨率问题的书，但我没有找到任何解决方案，因为大多数浏览器都认为1英寸是96像素，所以在

中使用
，
pt
或
pc
是行不通的

如何强制浏览器使html页面内的图像宽度为3英寸？
CSS中有一个“in”宽度标识符，即“inches”

因此，您只需设置一个：

width: 3in;

这个图像的规则


但如果你是在一个公司环境中为那些对网络一无所知的人编写CSS代码的话

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

是指向一个页面的链接，该页面解释了数字显示如何转换为物理英寸，并包含一个计算器程序。这都是关于新闻部的

当您在下拉列表中尝试不同的选项时，您将看到为什么这是一个无法精确回答的问题。如果你只担心一个单一的显示，那么尽一切可能使用他们的计算器，得到一英寸的精确像素宽度，并在CSS中使用它。
这是不可能的。
中的
测量用于打印，而不是视频输出。如果使用
宽度：8英寸；高度：11.5英寸
，然后它将作为标准字母大小的区域打印在纸上

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

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

总而言之，不可能强制浏览器显示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
        });
    });
})

这个问题的格式不正确，很可能您想做的任何事情都是错误的，但我将给您留下疑问和以下代码片段：

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();

看看这篇文章，你仍然必须“校准”，但是，正如其他人所说，根本没有办法解决这个问题。
虽然我很欣赏对这个问题的强烈意见，但HTML/CSS不仅仅用于屏幕上的页面显示。它实际上有一个极好的系统来描述书籍、目录和其他印刷/数字媒体中的页面

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

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

我之所以提到这一点，是因为在使用分页媒体时，OP的问题变得合法而重要，因为文本、图像和对象的固定尺寸变得非常重要

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

关于它，有很多很好的教程：除此之外。
首先，移动设备上的静态图像大小是不应该做的，除非它是图标/拇指图片。第二，你为什么不按照你想要的大小来提供图像呢？大多数浏览器并不认为1英寸是96像素，这是在规范中定义的：@JamesDonnelly-我应该使用不同的措辞，但不管怎样。。。它是96像素每准英寸（），不是真正的英寸，所以它是无用的！只需使用
3in
而不是
1in
：。96*3=288.我已更改了答案，以提供解决方法。当你有机会的时候，看一眼。拿一把尺子测量一下——你得到了什么？很公平，我更新了我关于“真实”英寸的回答。我不得不坐着听公司客户关于英寸的讲座，然后让他们在自己的显示器上看不同的分辨率，向他们展示这有多愚蠢。根据具体情况，我有时不得不根据自己的分辨率来定制CSS，这样我才能得到报酬。网络开发很有趣！你有点怀有敌意，但我要把它加在
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();

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

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