Smooth Scaling Static Responsive Image using Media Queries (Conditional CSS)

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.