I can't set the correct size of an image

user_13832029 0
Viewed 47

I can't change the size of images, I made a simple code to show this:

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="./assets/desktop/image-glass-and-keyboard.jpg" width="400px" height="400px">
</body>
</html>

When I inspect the image it shows a width of 400px and a height of 400px, that's good:

However, when I use digital rulers (I used three digital rulers and the ruler of the Sketch software), the values of the width and height don't match:

I'm going crazy, I don't know why this is happening. I really need help.

EDIT

following the answers here, I'm still having problems. Let's change from px to cm, because cm is an absolute unit:

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="./assets/desktop/image-glass-and-keyboard.jpg" width="10cm" height="10cm">
</body>

The picture gets really small:

I think I'm more confused than before.

css image html
2 Answers

Inspect element's way of measuring is the correct one, because CSS px is an abstract unit, it doesn't represent an actual on-screen pixel.

That image is 400x400 px in size

user_143112610

px is not an absolute unit

You can convert the unit to cm with the use of calc() by multiplying the number of pixels by the ratio of centimeters in a pixel (pixels * 0.026458333333333334) to get a real width of 400 pixels:

img{
  width: calc(400 * 0.026458333333333334 * 1cm);
}
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
* 1cm is required to convert the unit to cm

This is because cm is an absolute unit, which, as w3.org states:

...will appear as exactly that size (within the precision of the hardware and software).

user_142512210
Related