开发者

Showing an image in actual size with CSS

I want to show an image in actual size(real world size). I used mm unit to show the image in actual size but it wasn't exact in my two computers. Here is the fiddle of my code, this is a picture of a credit card. a credit card is 85.60 × 53.98 mm so if you put your credit card on screen you probably will see it's sm开发者_Go百科aller.

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

Basically the problem is mm, cm and in units are not working properly in screen. They are fine in printed version. Actually it seems those units are not made to work in the screen as what I got from W3C.

So is there any solution for this problem?

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

I created another fiddle that you can resize the credit card. The question could be how can I find that "Ratio" number? Please look at fiddle here and let me know what you thinking? Is there any way to find that Ratio number from user agent string or something?


There's no way to do this until operating systems, graphics cards, and display manufacturers all agree on a universal standard for converting physical dimensions into a pixels applicable to the particular set up a user is using.

The term for this concept is Resolution Independence

While there is some support for this in OSX and Windows, it's by no means complete and still takes manual intervention to set up properly.

On top of all of that, you are at the mercy of the end-user deciding to over-ride your measurements using zoom--be it on the desktop such as in Firefox or on a touch device by pinching.

So, at this point, I'm afraid there's no way to go about it.


mm and cm should not be dependant on pixels. But for it to render properly your browser has to combine screen diameter, aspect ratio and resolution.

W3C only recommends mm for print so there is probably a large difference in browser implementation for screen

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

BTW on my 1920x1080 (16:9) screen it works quite well


I am pretty sure that mm and cm are dependent on pixels, and pixels vary from monitor to monitor. Adjust your screen resolution and you'll see what I mean.

So, I guess the answer is a 'no'. Sorry.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜