Join Morten Rand-Hendriksen for an in-depth discussion in this video Using the <picture> element, part of Responsive Images.
- The picture element has several moving parts,…and for it to work properly,…all the parts need to be in place.…In the previous chapter, I showed you how…to make responsive images using the image element,…and I broke down the chapter…into several different movies,…that addressed each of the attributes.…For the picture element,…we have to do all of it at once to get it…to work so you can see it in the browser.…That said, it's not all that complicated,…so we'll be able to run through it in one go.…If you want to follow along, go to the exercise files…and find the files for movie 0404,…and then go and open the "Art" folder that's within it,…and then the "art-direction.html" file.…
When you inspect this file, you'll see it's pretty much…the same as the one we worked with in the previous chapter.…We have a standard head, that queues up a script,…that creates the picture elements,…and then we queue in the…"picturefill.min.js" script, as well.…Inside the content, we just have a headline,…and then we have a figure, and then within the figure,…
- 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).