Problem with reactive image code? Assessment wanted

Trying out the advice from https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images I can’t seem to get my own code to work the way the instructions are anticipating (the image does not resize to fit the browser window size and automatically starts on the smaller 480px width version of the image). Do you see what my error is?
https://codepen.io/CWMarshall/pen/RwgGPeO
note that this is just the code itself, not the images included.

Hello @cwmarshall

Your are mixing up the attributes of <source> and <img>

Either use <source> inside <picture> with media and srcset:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

or use <img> with sizes and srcset:

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

Hope that helps!
Michael

Ok that’s what I originally thought but because the instructions seemed unclear about asking me to use the element with the size attribute. So I was trying to combine the two, but I see the instructions were just unclear. Thank you!

1 Like