显示真实尺寸的图像答案

【问题标题】：Show an image in real dimension显示真实尺寸的图像
【发布时间】：2018-04-06 15:55:27
【问题描述】：

我有一张像这样的图像：link，我希望图像的大小始终是“真实的”，通常我不使用图形，因为我无法做到这一点，但它是对我的一位客户来说是一件很重要的事情。我想这取决于图像的 dpi ......所以我要求设计师制作一些具有不同 dpi 设置的图像，他给我发了一个链接。但它的大小不合适。你能给我一些关于这方面的信息吗？即使这是可能的事情..

（对不起，我的英语一如既往的糟糕，我正在学习！）

【问题讨论】：

标签： javascript css image dpi

【解决方案1】：

使用 CSS 高度和宽度。

高度和宽度可以设置为自动（这是默认值。表示浏览器计算高度和宽度），或者以长度值指定，如 px、cm 等，或以百分比 (%) 的形式指定包含块。

【讨论】：

如果您打开链接并尝试将高度和宽度设置为自动，因为您可以看到它无论如何都不起作用...我需要的是圆在任何情况下都是 16.9 毫米屏幕..
您可以使用毫米单位。也许我不明白这个问题
我想我可能无法很好地解释它：P 无论如何，您的单位解决方案和视口的 wizzwizz 解决方案将解决我的问题，我会在第二天尝试，谢谢暂时！
好吧..祝你好运！
明天就等设计师了，因为尺寸是毫米级的，所以不会在别的手机上测试，我就来了，别着急！跨度>

【解决方案2】：

浏览器在处理图像时通常不会处理“真实”尺寸；他们使用像素。

作为一个组合，您可以存储某种包含 URL 和真实图像大小的数据库（没有 SQL 复杂，除非您已经在使用它；JSON 或 XML 都可以）。然后你可以这样做：

var image = document.getElementsByTag("img")[0];
var true_size = lookup(image.getAttribute("src"));
image.style.width = true_size["width"] + "in";  // Or whatever unit
image.style.height = true_size["height"] + "in"; // Or whatever unit

如果您可以在服务器端使用style="" 属性，那就更好了！

添加这个<meta>标签，发现here，应该会导致模拟的in对应于真实的屏幕宽度：

<meta name="viewport" content="target-densitydpi=device-dpi" />

对此的支持差异很大（或者我听说过），因此它可能无法正常工作，但考虑到它指示网络浏览器在正确的宽度和高度。

【讨论】：

谢谢你的回答 wizzwizz4，现在我会在接下来的几天里尝试一些真正的戒指，然后我会来这里寻找正确的答案，
@gattass69 如果此答案有效，请不要忘记单击绿色对勾将问题标记为已回答。