Exploring the possibilities of using rem, em, and px for setting image dimensions

Question

Exploring the possibilities of using rem, em, and px for setting image dimensions

I am in need of clarification on the use of different units for image dimensions. Despite my research, I have not been able to find a consistent answer. Some sources suggest using only rem/em instead of pixels, but I am unsure if this also applies to images (width/height).

For instance, which unit should I use in the following scenario?

<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>

html css

Answer 1

Answer №1

px is used to render the pixel value accurately
rem utilizes the root element (html) with its font-size as the base (usually 16px) to calculate size, meaning your rem value from img multiplied by the font-size on html
em looks at the first parent with a font-size to determine the size it should render (similar calculation to rem - parent's computed px value multiplied by your em). If that parent uses em in its font-size, the child will inherit the computed/calculated font-size of the parent.

Understanding these concepts can be challenging (particularly em), refer to this example: https://jsfiddle.net/6ydf931w/

In my experience, I tend to steer clear of using em for most cases as it can lead to unexpected outcomes if not carefully monitored.

I typically restrict the use of rem to text when global adjustments are necessary.

px is reliable and predictable, so if it meets your needs, there's no harm in sticking with it.

Answer 2

px is used to render the pixel value accurately
rem utilizes the root element (html) with its font-size as the base (usually 16px) to calculate size, meaning your rem value from img multiplied by the font-size on html
em looks at the first parent with a font-size to determine the size it should render (similar calculation to rem - parent's computed px value multiplied by your em). If that parent uses em in its font-size, the child will inherit the computed/calculated font-size of the parent.

Understanding these concepts can be challenging (particularly em), refer to this example: https://jsfiddle.net/6ydf931w/

In my experience, I tend to steer clear of using em for most cases as it can lead to unexpected outcomes if not carefully monitored.

I typically restrict the use of rem to text when global adjustments are necessary.

px is reliable and predictable, so if it meets your needs, there's no harm in sticking with it.

Answer 3

Answer №2

Many CSS properties accept values in "length", such as width, margin, padding, font-size, etc. A length consists of a number followed by a unit, like 10px, 2em, etc.

**(px)**Absolute length units are fixed and the size will remain constant regardless of screen size. Although not recommended for screens due to varying sizes, they can be useful for print layouts.

Relative length units define a length relative to other properties. They scale better across different mediums. em Relative to the element's font-size rem Relative to the root element's font-size

Recommendation: Use REMs for setting sizes and spacing, and EMs for media queries.

To handle browser zoom issues with media queries, using both pixels and REMs may fail, making EMs a more reliable option.

Answer 4

Many CSS properties accept values in "length", such as width, margin, padding, font-size, etc. A length consists of a number followed by a unit, like 10px, 2em, etc.

**(px)**Absolute length units are fixed and the size will remain constant regardless of screen size. Although not recommended for screens due to varying sizes, they can be useful for print layouts.

Relative length units define a length relative to other properties. They scale better across different mediums. em Relative to the element's font-size rem Relative to the root element's font-size

Recommendation: Use REMs for setting sizes and spacing, and EMs for media queries.

To handle browser zoom issues with media queries, using both pixels and REMs may fail, making EMs a more reliable option.

Answer 5

Answer №3

Utilizing rem instead of pixels is recommended for creating a responsive website. This is because while pixels are absolute units, rem is relative to the root font-size.

Consider a scenario where all elements are defined in pixels and you need to scale them down for a smaller window size. If you were using pixels, each element would have to be adjusted individually. However, with rem units, simply changing the root font-size will scale everything proportionally.

Experiment with adjusting the font size in the example below to observe the impact:

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 6

Utilizing rem instead of pixels is recommended for creating a responsive website. This is because while pixels are absolute units, rem is relative to the root font-size.

Consider a scenario where all elements are defined in pixels and you need to scale them down for a smaller window size. If you were using pixels, each element would have to be adjusted individually. However, with rem units, simply changing the root font-size will scale everything proportionally.

Experiment with adjusting the font size in the example below to observe the impact:

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 7

Answer №4

Both em and rem are versatile units that can be converted into pixel values by the browser, based on the font size settings in your design. When you set a value of 1em or 1rem, it may translate to anything from 16px to 160px or another value.

Px values remain constant when displayed in the browser, so 1px will always show as exactly 1px.

The translation of rem units to pixel values is influenced by the font size of the html element.

Em units' conversion to pixel values is dependent on the font size of the element they are applied to. Use em units for sizing that should adjust according to the font size of an element other than the root. Employ rem units for sizing that does not require em units and should adapt based on browser font size settings. Utilize rem units in media queries.

Answer 8

Both em and rem are versatile units that can be converted into pixel values by the browser, based on the font size settings in your design. When you set a value of 1em or 1rem, it may translate to anything from 16px to 160px or another value.

Px values remain constant when displayed in the browser, so 1px will always show as exactly 1px.

The translation of rem units to pixel values is influenced by the font size of the html element.

Em units' conversion to pixel values is dependent on the font size of the element they are applied to. Use em units for sizing that should adjust according to the font size of an element other than the root. Employ rem units for sizing that does not require em units and should adapt based on browser font size settings. Utilize rem units in media queries.

Exploring the possibilities of using rem, em, and px for setting image dimensions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can you adjust the div orientation for small screens using Bootstrap?

Ways to toggle the visibility of an element based on the condition of two other elements

changing up the format of nested blockquotes

Why is it not working when I try to apply a style to a select dropdown box?

Can the distinction between a page refresh and closure be identified using the method below?

When the canvasJS range column chart is below the horizontal axis, modify the color and width of the bars

Issue with CakePdf unable to properly render CSS styling

Changing the direction of the submenu to the left instead of the right

Remove the preset text in an input field by clicking on it

Using a carousel component in Bootstrap

Information from contact forms gets inputted into the URL

What is the reason behind Google Font's decision to preconnect to fonts.googleapis.com?

Change the <base> element programmatically during server-side rendering

Design a Bootstrap dropdown menu featuring various options within an icon container

Limiting the use of CSS selectors to a single class without the need to include the class name multiple

Troubleshooting: Issue with detecting keypress using jQuery

Footer not positioned at the bottom of the page

Separation between dropdown menu subcategories

Convert an HTML file to .msg format or prevent the send button from functioning in Outlook messages

Tips for adjusting the placeholder color in Material UI using React JS