Html - how are pixels determined?
From my experience so far, pixel size is something very relevant and intuitive in different ways based on many factors. My question is how pixels work in html pages.
For example, we can set the width and height of the image:
<img src="lalala.jpg" width="100px;" height="100px;">
What does 100 pixels mean?
How are 100 pixels translated to the screen?
How to translate 100 pixels if on a printed dad?
To be more specific. If I set the image size to 100px then will it have the same size in inches on different screen sizes? Ad if so. Will it be the same size if I print the same page using a different screen size?
The length of HTML attributes pixels height
and width
controlled CSS. In some cases, they are considered "CSS pixels". The HTML itself does not provide a definition of what the pixel should represent (which is why I added the css to your question).
The CSS itself has its own unit and value documentation that defines a pixel in its Absolute Lengths section :
5.2. Absolute lengths: 'cm,' mm, 'in,' pt, 'pc,' px units
Units of absolute length are fixed relative to each other and tied to some physical dimension. They are mostly useful when the output environment is known. Absolute units are composed of physical units (in, cm, mm, pt, pc) and the px unit:
unit definition ---- ---------- ‘cm’ centimeters ‘mm’ millimeters ‘in’ inches; 1in is equal to 2.54cm ‘px’ pixels; 1px is equal to 1/96th of 1in ‘pt’ points; 1pt is equal to 1/72nd of 1in ‘pc’ picas; 1pc is equal to 12pt
100 pixels equals approximately 1.041 inches, which is approximately 2.65 cm by itself.
I will not answer any further questions you asked about different monitors and printing, as that would make my answer incredibly long and boring. If you want to find these answers yourself, then a good place to start is in the same document I already linked, which goes into detail about the Reference Pixel . The CSS values are based on 96dpi (meaning 96 pixels on a 96dpi monitor would be equal to one inch if you were to measure it with a ruler).
source to share