CSS-defined sizes with srcset responsive image

WordPress 4.4 introduced responsive images and a wp_calculate_image_sizes filter to add custom sizes rules based on media queries.

However, the sizes are added in the markup, like :

<img 
src="curiosity-medium.jpg"
alt="Mars Curiosity Rover takes an excellent selfie."
srcset="
     curiosity-large.jpg  1120w,
     curiosity-medium.jpg 720w,
     curiosity-small.jpg  400w"
sizes="
     (min-width: 40em) calc(66.6vw - 4em),
     100vw"
>

which is mixing form and content and not very suitable for complex layouts.

I would like to know if it’s possible to declare the sizes in the CSS stylesheet instead, like :

.some-class img {
      sizes:
         (min-width: 40em) calc(66.6vw - 4em),
         100vw";
}

Is that standard ? Is it understood by browsers ? I haven’t seen any example of this so far.

Thanks.

Read more here: CSS-defined sizes with srcset responsive image

Leave a Reply

Your email address will not be published. Required fields are marked *