Join Morten Rand-Hendriksen for an in-depth discussion in this video Adding Picturefill to your site, part of Responsive Images.
- [Voiceover] In the following chapters,…we'll be exploring responsive images markup,…and it goes without saying that for us…to explore responsive images markup,…we need to make sure the browser…can actually display responsive images, first.…And we're gonna do that by adding…the Picturefill polyfill into our project.…What project am I talking about?…Well, here you have options.…You can either take a project you are currently working on…that has HTML5 markup and add responsive images…into that project,…or you can follow along with me…and use the exercise files that are provided…with this course to match my code exactly.…
If you do choose to use the exercise files,…simply go to the course and download the exercise files…and then find the exercise files for whatever movie…you are currently watching.…So, right now you are watching 02_02.…If you go to the exercise files folder…and place the files onto your desktop like I have,…you'll see, inside the folder,…there's an index.html file with all my markup,…there's a simple style sheet called stylesheet.css,…
- 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).