0

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?

kasperwf
  • 277
  • 2
  • 4
  • 16

1 Answers1

0

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.

Orlando Baez
  • 24
  • 2
  • Very nice - it works, and also looks way better mark-up wise than my mess up there did, so thank you. :-) – kasperwf Nov 03 '14 at 07:38