Correct attribute size for img with srcset in liquid, soft, media-requested container?

I am trying to implement a new attribute srcset

for <img>

and I am running into some cases of edges not working or missing something.

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

I am getting the idea of ​​very simple examples like:

<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, magnification, and other factors. It can load medium.jpg for a simple 200px screen or 100px hdpi (2x) display. So far so good.

The problem is attribute based sizes

. In the previous example, we tell the browser that the image spans the entire (100%) width of the viewpoint (vw).

A project I'm working on is using Foundation which has fluid , em-padded grids that can have more or less columns based on screen sizes (media queries).

Let's say, for example, that we need a grid where small screens have 2 columns and medium screens ( min-width: 40em

) have 4 columns. Each column contains an image. What would be correct sizes

given that each column is fluid-wide and has padding as defined in em

s?

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

      

  • sizes="(min-width: 40em) 25vw, 50vw"

  • sizes="(min-width: 40em) ???em, ???em"

  • sizes="(min-width: 40em) ???px, ???px"

The approach vw

ignores column padding. The approach em

or px

ignores the fact that the columns are fluid (and I'm not even sure what values ​​they should have).

Any ideas?

Thanks in advance.

+3


source to share


1 answer


Well Foundation doesn't work like this, at the moment they are using javascript data-interchange

to work 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 image exchange

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

      

Using retinal imaging



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 can simply create new custom named queries and pipe them to your Img.

+2


source







All Articles