I'm currently trying to build a website that includes a small pixel art image sized up to be larger, and per the internet's recommendation, I'm using rem to make sure everything resizes nicely.

However, I'm run into an issue when sizing the image. When I try to resize it, it treats 1 rem as equal to 1 px. So the following code will display as a 16px by 12px image:

<img src="image.png" width="16rem" height="12rem">

What's going on? According to everything I've read, it should display as a 256px by 192px image. Both my fonts and divs are sizing exactly like I expect, so I don't know why my images are acting up.

Thanks!

CodePudding user response：

The height and width attributes inside an <img> tag are always measured in pixel units – actually you don't write the unit in these attributes normally – just the numbers.

To achieve what you want, use a CSS stylessheet (and in it a rule for a class or ID which you apply to your <img> tag), or use the style attribute inside the img tag, like:

<img src="image.png" style="width:16rem;height:12rem;">

P.S.: Your wrote "per the internet's recommendation, I'm using rem to make sure everything resizes nicely": I don't know which "internet" recommended that to you ;-), but – if at all – it only applies to certain things (first of all font sizes), not to everything, and especially not to images.