This demo shows image-set() CSS can work with existing media queries, however this method is really only useful for static images. Dynamically resized images are able fill the width of the parent's available width. View demo 8 to see the images scale to the exact available width.
The primary content on the left side take 60% of the available width. The content on the right side containing the image takes 40% of the available width.
Adjusting the width of the browser will request various static images. The left border color of the image will change according to the applied media query. Images will not fill up the available width like Demo 8, but instead adjust to specific sizes when the available width is large enough. View the source to see how the media queries are doing this.
- Green left border: The window's width is at least 1200px wide, showing the 480px CSS wide image.
- Blue left border: The window's width is at least 800px wide, showing the 320px CSS wide image.
- Yellow left border: The window's width is less than 800px wide, showing the 240px CSS wide image.