[SOLVED] Reponsive images using <picture> in css

[amc]

I need to use responsive images. This piece of code codepen.io/anon/pen/vOMqjb works perfectly

But there is one think I don’t like in it. The media queries are there, in the markup, whilst I have them in sass/css, so in ONE place I define the breakpoints. I wonder if there is a way to “move” this code to CSS (only css, no js) to avoid / abstract the media query within the element.

thanks

[PaulOB]

@amc

codepen.io/anon/pen/vOMqjb

The srcset was specifically designed so that the browser could choose the appropriate ‘content’ image based on the criteria you supplied. This is so that only the one image gets loaded as appropriate. You cannot divorce the attributes from the srcset or all you have is just a normal image tag.

If you want to control it all from the css file then you will need to use background images instead but then that defeats the purpose of the picture and srcset elements which is to allow content image to be present in the html.

If the images are purely decoration then they should be in the background anyway.