I have a site with a 12 column layout and I'm trying to figure out to use the srcset and sizes attributes correctly for matching my design.
I have a sidebox which spans 3 columns in desktop, but in tablet and mobile sizes it spans 12 cols (100% width).
What I want is for the image used in desktop-version, also to be used in mobile (max-width 480px), and a specific tablet-sized image to be used in everything between 481px and 781px.
This is my code:
<img
src="http://placehold.it/370x150/cecece"
srcset="http://placehold.it/768x311/f67f57 768w, http://placehold.it/370x150/cecece 320w"
sizes="(max-width: 768px) 100vw, (max-width: 480px) 100vw"
>
In my example, the 768 version is always used until 780px, and then the default src is used. But how does I get it to use the 320 version up until 480px?
How about this:
<img
sizes="(min-width: 781px) 370px, 100vm"
srcset="http://placehold.it/768x311/f67f57 768w,
http://placehold.it/370x311/cecece 480w"
>
It should show the smallest image up to 480px, then the large one up to 780px and the small one >780px.