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
1 Like