Menu
How can browsers understand the em unit when used in a responsive image?
<img alt="A giraffe" src="giraffe.jpg"
srcset="[email protected] 600w, [email protected] 800w, [etc.]"
sizes="(max-width: 40em) 40em">
This validates, and I'm not seeing warnings in browser consoles. But if the whole point of the image preloader is to fetch images before the CSS is downloaded and parsed, what does the browser use for em?
Is it just its default font-size that it applies to <html>? Should I use rem for clarity? Is there a difference between the two when the user zooms?
This isn't theoretical; I'm using em in my media query breakpoints, and some images are constrained by a container sized for optimal line length (using em, of course).
I checked the spec, but it's remarkably terse on the new responsive image features.
346
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
Responsive images are the set of techniques used to load the right image based on device resolution, orientation, screen size, network connection, and page layout. The browser should not stretch the image to fit the page layout, and loading it shouldn't result in time & bandwidth wastage.
Resolution switching: Same size, different resolutions In this case, sizes is not needed — the browser works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the srcset .
I bent the ears of the guys inside the official W3C #respimg chatroom, and this is what they had to say:
<Tigt> Pardon me folks, I had a question about how
emis interpreted when used insidesizes
<TabAtkins> Tigt: Same as in Media Queries - they're relative to the initial font size.
<TabAtkins> (Not the font size on <html>, the initial font size, as set by the user's personal settings.)
<Wilto> 16px almost everywhere, so long as you haven’t changed the
font-sizeofhtml.
<TabAtkins> Tigt: rem is treated identical to em here.
So the speed-read is:
sizes or media queries, em and rem are both specced to mean "the user's default font-size.em or rem that controls how the image is laid out on the page can end up different if your CSS changes item if they want to give the image preloader truthful informationW3C Media Queries:
This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }The ‘em’ value is relative to the initial value of ‘font-size’.
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With