Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set physical dimensions (like actual inches) for elements?

Tags:

My end goal is to display an image of the same exact size on every screen (yes, I really do need this for something).

I started reading about how to get the user's screen size here - and the answer seems to be that it's impossible (without calling an API which attempts to guess the actual device based on some params).

I then remembered that css has physical dimension units for sizing elements and decided to test on my screen. I set dimensions like so:

<div style = "background-color:black; height: 5in; width: 3in;"></div>

and then put a physical 3"x 5" (7.6cm x 12.7cm) flashcard against the screen.

It was significantly off in size.

Fun note - setting size in mm was ridiculously off - I expected to get the same results as with inches.

With that said, is there a way to do what I need?

like image 333
VSO Avatar asked Jan 13 '17 02:01

VSO


People also ask

How can the dimensions of an element be defined?

Dimension elements are usually stored in the database as numeric codes or short character strings to facilitate joins to other tables. Each dimension element can define multiple dimension attributes, in the same way dimensions can define multiple dimension elements.

Is used to set the width size of an element?

The CSS height and width properties are used to set the height and width of an element. The CSS max-width property is used to set the maximum width of an element.

Can I use inches in CSS?

There is no restriction on which units can be used where. If a property accepts a value in px ( margin: 5px ) it also accepts a value in inches or centimeters ( margin: 1.2in; margin: 0.5cm ) and vice-versa.

How do you find the height of an element?

The first method is to use the offsetHeight property. It is a read-only property that returns the height of an element in pixels, including border, padding, and scrollbar.


1 Answers

In CSS, one inch does not equal one physical inch. It equals 96px.

This section of the spec may help you:

5.2. Absolute lengths: the cm, mm, q, in, pt, pc, px units

enter image description here

The absolute length units are fixed in relation to each other and anchored to some physical measurement.

If the anchor unit is the pixel unit, the physical units might not match their physical measurements.

Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels

like image 182
Michael Benjamin Avatar answered Sep 23 '22 09:09

Michael Benjamin