weirdness: size maximum with picturefill_wp_apply_to_html

[inbetweencode]

There is a difference in calling:

picturefill_wp_apply_to_html( get_the_post_thumbnail( null, 'medium' ) );

picturefill_wp_apply_to_html( get_the_post_thumbnail( null, 'large' ) );

When calling medium. Picturefill.js will never select the larger src, even when the -box growns beyond it. A difference can be seen in the measuring

in the . But in a sense (i guess) also has to do with the 'hardcoded' width= and height= in the tag.

Context: I have a page that renders the images at 100% width of it's container via CSS. The container is 100% of the viewport . At 1080px a media-query kicks in setting the container at 1080px. Sizes of image sources are: medium max 720px, large max 1080px

[inbetweencode]

I will investigate a little more, and report to scottjehl/picturefill when appropriate.

[kylereicks]

This sounds like the behavior I designed. The sizes attribute is used to choose the image size for output. The default sizes for your medium image should be (max-width: 720px) 100vw, 720px. This tells the browser to use the image size that best matches the browser width up to 720px, and above that point to use the image that best matches a width of 720px. More simply, "If there is room for this image, show this image, if not, show a size that fits." I assumed that this would be the most sought after behavior, and I think it is a useful default.

If I understand your case correctly, you want the image to always be as large as it can be without exceeding the width of the browser window. We can do this a few different ways.

We can register a new sizes attribute that matches our desired behavior, for the desired image sizes.

function register_theme_sizes(){
  picturefill_wp_register_sizes('big-as-can-be', '100vw', array('large', 'medium', 'thumbnail', 'custom-image-size'));
}

add_filter('picturefill_wp_register_srcset', 'register_theme_sizes');

We can filter the sizes attribute for the same effect.

function return_100vw(){
  return '100vw';
}

add_filter('picturefill_wp_sizes_string_thumbnail', 'return_100vw');
add_filter('picturefill_wp_sizes_string_medium', 'return_100vw');
add_filter('picturefill_wp_sizes_string_large', 'return_100vw');

Or we can simply call the largest image sizes available from the beginning. The effect should be the same.

picturefill_wp_apply_to_html(get_the_post_thumbnail( $post->ID, 'full'));

Let me know if I've misunderstood what you're trying to accomplish, or if there is something that needs further exploration.

Thanks