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 exact width of the parent's available width. View demo 9 to see the images block scale.
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. Smooth scaling static images fills up the available width the browser provides the image. However, the quality of the image is only dependant on how well the browser scales the given image. View the source to see how the media queries are doing this.
- Green left border: The window's width is at least 800px wide, showing the 480px CSS wide image.
- Blue left border: The window's width is at least 600px wide, showing the 320px CSS wide image.
- Yellow left border: The window's width is less than 600px wide, showing the 240px CSS wide image.