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.
source to share
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.
source to share