CODEWITHSUNDEEP
htmlresponsive-designzurb-foundation
Petit Saltamartí
Petit Saltamartí

Reputation: 31

Correct sizes attribute for img with srcset in a fluid, padded, media-queried container?

I'm trying to implement the new srcset attribute for <img> and I've run into some edge cases that are not working or I'm missing something.

I'm using the picturefill 2.1.0 polyfill, and I've read some articles like http://ericportis.com/posts/2014/srcset-sizes/ or https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content.

I get the idea of very simple examples, e.g:

<img
    src="small.jpg"
    srcset="
        small.jpg  100w,
        medium.jpg 200w,
        large.jpg  300w
    "
    sizes="100vw"
>

The browser loads small.jpg, medium.jpg or large.jpg depending on screen size, pixel density, zoom and other factors. It may load medium.jpg for a 200px simple screen or a 100px hdpi(2x) display. So far so good.

The problem relies on the sizes attribute. In the previous example we are telling the browser that the picture takes up the whole (100%) viewpoint width (vw).

The project I'm working in uses Foundation, which has fluid, em-padded grids that may have more or less columns based on screen sizes (media queries).

Let's say, for instance, that we want a grid in which small screens have 2 columns, and medium screens (min-width: 40em) 4 columns. Every column contains an image. What would be the correct sizes keeping in mind that each column is width-fluid and has a padding defined in ems?

<ul class="small-block-grid-2 medium-block-grid-4">
    <li>
        <img
            src="small.jpg"
            srcset="
                small.jpg  160w,
                medium.jpg 320w,
                large.jpg  480w
            "
        >
    </li>
</ul>
  1. sizes="(min-width: 40em) 25vw, 50vw"
  2. sizes="(min-width: 40em) ???em, ???em"
  3. sizes="(min-width: 40em) ???px, ???px"

The vw approach ignores the padding of the columns. The em or px approach ignores the fact that columns are fluid (and I'm not even sure which values should they have).

Any ideas?

Thanks in advance.

Upvotes: 3

Views: 1373

Answers (1)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Well Foundation doesn't work like that, for the moment they are use javascript data-interchange to deal with the new attr srcset:

<img 
     data-interchange="[/path/to/default.jpg, (default)], 
     [/path/to/small.jpg, (small)], 
     [/path/to/retina.jpg, (retina)], 
     [/path/to/medium.jpg, (medium)], 
     [/path/to/bigger-image.jpg, (large)]"
>

<!-- or your own queries -->
<img 
     data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], 
     [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]"
>

Using Interchange With Images

data-interchange="[image_path, (media query)], [image_path, (media query)]"

Using Retina Images

data-interchange="[image/path/to/retina.jpg, (retina)]"

Custom Named Queries

$(document).foundation('interchange', {
  named_queries : {
    my_custom_query : 'only screen and (max-width: 200px)'
  }
});

In your case you could just make new custom Named Queries and pass it to your Img.

Upvotes: 1

Related Questions