Untitled

dabblet.css

img {
  width: 100%;
}

@media all and (min-width: 500px) { img { background-image: url('http://tmp.pgdn.us/b.jpg'); padding-top: 100%; height: 0; background-size: 100%; }}
@media all and (min-width: 600px) { img { background-image: url('http://tmp.pgdn.us/c.jpg') }}
@media all and (min-width: 700px) { img { background-image: url('http://tmp.pgdn.us/d.jpg') }}
@media all and (min-width: 800px) { img { background-image: url('http://tmp.pgdn.us/e.jpg') }}
@media all and (min-width: 900px) { img { background-image: url('http://tmp.pgdn.us/f.jpg') }}

dabblet.html

<img src="http://tmp.pgdn.us/a.jpg" alt="" />

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}