Use of rem, em and px on image dimensions [duplicate] - html

Question

This question already has answers here:
Should I use px or rem value units in my CSS? [closed]
(10 answers)
Which unit I should use in CSS when designing a web page
(6 answers)
What is the difference between px, em and ex?
(4 answers)
Closed 3 years ago.
I'm looking for some explanation regarding these units' use on image dimensions, but can't find any. I've read in some places to forget about pixels and use only rem/em, but I don't know if it's also applied for images dimensions (width/height).
For example, which one should I use in this case below?
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5rem;" />5rem<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5em;" />5em<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 100px;" />100px<br>

Answer 1

px renders the pixel value
rem uses the root element (html) using its font-size as the base (16px by default) to calculate its size, so basically your rem value from img multiplied by the font-size on html
em uses the first parent with a font-size to calculate the size it needs to render (calculated the same as rem above - parent computed px value multiplied by your em). If a that parent is using em in its font-size, the child will use the computed/calculated font-size of the parent.
Explanation can be tough to grasp (especially em), have a look here: https://jsfiddle.net/6ydf931w/
For the most part, I tend to avoid using em for almost everything because it can result in unexpected results if you are not permanently aware of where it is used.
I usually limit rem to text in the event it needs to be changed globally.
px is very predictable, if this works for you, there is no harm in using it.

Answer 2

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
**(px)**The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.
Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.
em Relative to the font-size of the element
rem Relative to font-size of the root element
Use REMs for sizes and spacing.
Use EMs for media queries.
In summary, both pixels and REMs for media queries fail in various browsers when using browser zoom, and EMs are the best option we have.

Answer 3

It's a better practice to use rem instead of pixels if you want a responsive website. This is because pixel is an absolute unit while rem is a unit relative to your root's font-size.
Imagine that you have all your elements in pixels and want to scale everything when your window is smaller. If you had pixels you would have to change everything one by one. However with rem you can change your root's font size and everything is scaled all at once.
Try changing the font size in the example below and see by yourself:
html{
font-size: 30px;
}
.pixel1{
width: 30px;
height: 30px;
background-color: red;
margin-bottom: 10px;
}
.pixel2{
width: 40px;
height: 40px;
background-color: red;
margin-bottom: 10px;
}
.rem1{
width: 1rem;
height: 1rem;
background-color: blue;
margin-bottom: 10px;
}
.rem2{
width: 1.4rem;
height: 1.4rem;
background-color: blue;
}
<div class="pixel1"></div>
<div class="pixel2"></div>
<div class="rem1"></div>
<div class="rem2"></div>

Answer 4

Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. If you use a value of 1em or 1rem, it could translate in the browser as anything from 16px to 160px or any other value.
px values are used by the browser as is, so 1px will always display as exactly 1px.
Translation of rem units to pixel value is determined by the font size of the html element.
Translation of em units to pixel values is determined by the font size of the element they’re used on. Use em units for sizing that should scale depending on the font size of an element other than the root.Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.Use rem units on media queries