使用CSS显示实际大小的图像

时间:2011-09-07 04:34:29

标签: javascript css browser

我想以实际尺寸(真实世界大小)显示图像。我使用mm单位以实际大小显示图像,但在我的两台计算机中并不完全相同。 这是我的代码的fiddle,这是一张信用卡的图片。信用卡是85.60×53.98毫米,所以如果你把信用卡放在屏幕上,你可能会看到它更小。

img{
    width:85.60mm;
    height:53.98mm;
}

基本上问题是mmcmin单位在屏幕上无法正常工作。它们印刷版很好。实际上,这些单位似乎不能像我从W3C那样在屏幕上工作。

那么这个问题有什么解决方案吗?

----- ------ EDIT

我创建了另一个小提琴,你可以调整信用卡的大小。问题可能是我如何才能找到“比率”数字?请查看fiddle here并告诉我您的想法?有没有办法从用户代理字符串中找到比率数字?

3 个答案:

答案 0 :(得分:3)

在操作系统,图形卡和显示器制造商都同意将物理尺寸转换为适用于用户正在使用的特定设置的像素的通用标准之前,无法做到这一点。

此概念的术语是Resolution Independence

虽然在OSX和Windows中对此有一些支持,但它并不完整,仍然需要手动干预才能正确设置。

除此之外,最终用户决定使用缩放来覆盖您的测量结果 - 无论是在桌面上,例如在Firefox中还是在触摸设备上,都可以通过捏合来实现。

所以,在这一点上,我担心没有办法解决这个问题。

答案 1 :(得分:2)

毫米和厘米不应该依赖于像素。但要正确渲染,浏览器必须结合屏幕直径,宽高比和分辨率。

W3C仅推荐mm用于打印,因此屏幕的浏览器实现可能存在很大差异

http://www.w3.org/Style/Examples/007/units

BTW在我的1920x1080(16:9)屏幕上运行得很好

答案 2 :(得分:1)

我很确定mm和cm取决于像素,并且像素因显示器而异。调整屏幕分辨率,你就会明白我的意思。

所以,我猜答案是'不'。遗憾。