Join Morten Rand-Hendriksen for an in-depth discussion in this video Using sizes, part of Responsive Images.
- When adding the sizes attribute…to our responsive images mark-up,…we have to take a look at the CSS that powers our page.…That's because if we look at the responsive…design I've created, you'll notice at a certain point…the content itself stops growing.…There's a break point in my responsive web design…that tells the browser, at this point we have reached…the max width of the content and from now on…the content's just gonna float in the middle.…So now we have to go the CSS and find out…exactly where that break point is…because we're gonna use that same break point to notify…to the browser that now the image stops growing as well.…
If I go to my CSS and find the main container,…the one that wraps around all my content,…you'll see that by default, so for small screens,…the margin right and left are set to auto.…And there's a padding on the left and right of 1ems.…So that corresponds with what I'm seeing here.…We have a 1em padding on either side…and the content is sitting in the middle.…Then, when I hit the 48em break point,…
- How responsive images work
- Adding Picturefill to your site
- Making regular images responsive
- Using the <picture> element
- Identifying breakpoints and layout changes
- Using the <picture> elements for image type fallbacks
Skill Level Intermediate
Q: When I use Firefox's Responsive Design View, the images aren't automatically reloading when I resize the window. What do I do?
A: This is a known bug that only affects Firefox version 38. If you update to Firefox 39 or later, this should be resolved (at the time of writing, Firefox 39 is slated for release June 30, 2015).